I have an issue with the toggle button when window resizes. The issue is that I clicked on the toggle which shows up a list of items and i left it open, however when I resize the window the toggle is still left open despite the fact that I put display:none;on the media query.
HTML CODE:
<section id="nextprevsection">
<h2 id="nextprev">View more projects?</h2>
<ol class="select">
<li>Previous Project</li>
<li>Next Project</li>
<li>Back to work</li>
</ol>
</section>
CSS:
.nextprev{
display:none;
}
#nextprev{
display:none;
font-size:16px;
width:200px;
background:url(../img/work/downarrow.png) right no-repeat #333;
color:#FFF;
cursor:pointer;
padding:10px;
margin:auto;
margin-top:-150px;
}
ol.select {
display: none;
background:#666;
width:220px;
margin:auto;
padding:0px;
list-style-type:none;
}
.select{
display:none;
}
.select a{
color:#FFF;
text-decoration:none;
}
ol.select > li:hover {
background: #aaa;
}
JQUERY CODE:
//next previous
var nav = $('#nextprev');
var selection = $('.select');
var select = selection.find('li');
if ($(window).width() >= 768) {
nav.removeClass('active');
selection.css("opacity","none");
}
else{
nav.addClass('active');
}
nav.click(function(event) {
if (nav.hasClass('active')) {
nav.removeClass('active');
selection.stop().slideToggle(200);
} else {
nav.addClass('active');
selection.stop().slideToggle(200);
}
event.preventDefault();
});
select.click(function(event) {
// updated code to select the current language
$(".select").css("display","none");
select.removeClass('active');
$(this).addClass('active');
});
</script>
MEDIA QUERIES CODE:
#media screen and (max-width: 768px){
/*Next and previous*/
#nextandprev{
display:none;
}
.select{
display:block;
}
#nextprev{
display:block;
}
#nextprevsection{
height:200px;
margin-bottom:100px;
}
}
Well, a screen re-size isn't necessarily going to invoke your code that detects the screen size. One option you have is setting a short timer that periodically checks the screen size and invokes your code.
But that's the lame answer. Try $(window).resize(function(){});
http://api.jquery.com/resize/
Basically it wraps the window.onresize event (which I honestly didn't know existed til recently, stupid DOM!!) and let's you do your own thing with it :)
Related
I am trying to design a collapsible/hide-able sidebar for my web application, in the vain of Facebook's Chat/Event Ticker. It needs to have two separate sections, separated vertically, and both independently scrollable.
I have tried to implement this using jakiestfu's Snap.js plugin.
https://github.com/jakiestfu/Snap.js/
While this works great, it moves the content on my page out of view, and breaks my position: fixed header elements due to CSS transform: tranlate3d().
Since there's no good fix the these CSS issues, I was wondering if anyone knew of a solution to mimic functionality of the Facebook Chat/Event Ticker sidebar.
I've done something similar using CSS3 resizing on the fixed sidebar (mine was on the left) and adjusting the main page's margin-left when the sidebar size changed. You could likely do something similar on the sidebar first, then split the sidebar in two the same way.
var sizeme = 200,
sizeItBro = function () {
if ($("#sidebar").width() != sizeme) {
sizeme = $("#sidebar").width() + 40;
$("#main").css("margin-left", sizeme + "px").text(sizeme + " pixels of margin.");
}
};
window.setInterval(sizeItBro, 150);
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body {
margin:0;
padding:0;
}
#main {
margin-left:200px;
min-height:100%;
padding:20px;
}
#sidebar {
position:fixed;
top:0;
bottom:0;
left:0;
background:#ffa;
width:200px;
min-width:100px;
max-width:500px;
resize:horizontal;
overflow:auto;
border-right:2px ridge #fe9;
padding:20px;
}
#tophalf {
background:#fe9;
height:300px;
min-height:100px;
max-height:500px;
resize:vertical;
overflow:auto;
border-bottom:2px ridge #fe9;
margin:-20px -20px 20px;
padding:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">Main Content</div>
<div id="sidebar">
<div id="tophalf">Sidebar A</div>
<p>Sidebar B</p>
</div>
I am trying to create a dropline style menu.
Please see my fiddle here - http://jsfiddle.net/oampz/38c6q/
The issue i'm having is, i don't want the brown menu - or for it to drop down/fade in.. I'm trying to get the sub menu items to simply appear in the grey coloured sub DIV.
$('#main-nav > li').hover(function(){
if(!$(this).find('.main-link').hasClass('active')){
$("#main-nav > li a.active").removeClass("active");
$(this).find('.main-link').addClass("active");
if($(this).find('li').length){
//$("#main-nav li a.close").stop().fadeIn();
//There is no .close
var that = this;
$("#sub-link-bar").stop().animate({ height: "40px"}, function(){
$(that).find(".sub-links").show();
});
}
else {
$(this).find(".sub-links").stop().fadeOut( function(){
$(this).css('opacity','1');
$("#sub-link-bar").stop().animate({height: "1px"});
});
}
}
}, function(){
if($(this).find('li').length){
$(this).find(".sub-links").stop().hide( function(){
$(this).css('opacity','1');
});
}
$("#sub-link-bar").stop().animate({height: "1px"});
$(this).find('.main-link').removeClass('active');
});
Any help appreciated.
I've updated the code http://jsfiddle.net/38c6q/1/
replaced this
$("#sub-link-bar").stop().animate({ height: "40px"}, function(){
$(that).find(".sub-links").show();
});
with
$('#sub-menu').html( $(that).find(".sub-links").html() )
To have them float next to each other, you can add this CSS
.sub-menu li{
display:block;
padding:0;
margin:0;
float:left;
}
And to add some colors and backgrounds to links, add some CSS like this
.sub-menu a{
display:block;
margin:0 5px;
padding:5px;
text-decoration:none;
Color:#333;
}
.sub-menu a:hover{
background:#333;
color:#fff;
}
updated Demo at
http://jsfiddle.net/38c6q/4/
I'm trying out a vertical ticker that displays a few text list items one after the other, but I need some help in positioning them.
You'll see a web ticker with two items. To display only one item at a time, I have to set 'overflow:hidden' in #tickerContainer.
However, the text in the ticker is not being positioned at the center of the ticker(As you see it is sitting at the bottom).
Also, when I remove 'overflow:hidden' from #tickerContainer, which is the whole ticker moving away from the top of the page?
Please help me fix this.
http://jsfiddle.net/nodovitt/NYhY4/2/
<div id="tickerContainer">
<ul id="ticker" class="js-hidden">
<li class="news-item">Item Number 1</li>
<li class="news-item">Item Number 2</li>
</ul>
</div>
The jQuery function:
<script>
function tick() {
$('#ticker li:first').slideUp(1000, function () {
$(this).appendTo($('#ticker')).slideDown(1000);
});
}
setInterval(function () {
tick()
}, 2000);
</script>
The CSS:
#tickerContainer {
background-color:white;
border-radius:15px;
text-align:center;
margin:10px;
box-shadow:0 0 8px black;
color:#2B7CD8;
font-size:50px;
width:500px;
height:100px;
overflow:hidden;
}
.news-item {
font-family:Times New Roman;
font-style:oblique;
}
#ticker li {
list-style-type:none;
}
You haven't put any specifications on your ticker id. So something like this http://jsfiddle.net/NYhY4/10/
#ticker {
padding:0px;
margin:0px;
padding-top:20px;
height:55px;
overflow:hidden;
}
Here is my answer as requested by OP
Add this css to your #ticker
#ticker {
margin: 0;
padding: 0;
line-height: 100px;
}
NOTE The line-height will always have to be the height of the #tickerContainer
You can see it here http://jsfiddle.net/NYhY4/3/
#ticker li {
list-style-type:none;
position: relative;
bottom:20px;
}
I didn't like the current item being hidden by seemingly "nothing" (the blank part of li box above the text) so I used this approach:
Remove the margins from the '#ticker'
set '#ticker' padding-top (.5em worked best for me)
set '#ticker li' padding-bottom to push the next item out of view (I used '1em' to be safe but '.5em' worked too)
The words didn't look perfectly centered so
set '#ticker li' line-height to '1em'
#ticker {
margin: 0;
padding-top: .5em;
}
#ticker li{
line-height: 1em;
padding-bottom: 1em;
list-style-type: none;
}
http://jsfiddle.net/JvuKU/2/
Note This depends on the font-size of the '#tickerContainer'. If you change the height or font-size of the '#tickerContainer', just adjust the values of '#ticker' padding-top and '#ticker li' padding-bottom.
I have used jQueryCollapse plugin for displaying Questions and Answers.
Question is written on Tab and Answer is displayed when we click on tab.
When tab is active means when answer is displayed at that time page height increases and because of that I have to increase the height of background image.
For that I have coded as follows:
<script type="text/javascript">
$(document).ready(function(){
$('#main-content1').height(1450);
$("#t1").click(function(){
var height = 1450;
$('#main-content1').height(height);
});
$("#t2").click(function(){
var height = 1450;
$('#main-content1').height(height);
});
$("#t3").click(function(){
var height = 1275;
$('#main-content1').height(height);
});
$("#t4").click(function(){
var height = 1250;
$('#main-content1').height(height);
});
</script>
The CSS code for id main-content is as follows:
#main-content1 {
margin-left:auto;
margin-right:auto;
margin-top:35px;
width:900px;
border-top-left-radius:48px;
border-top-right-radius:48px;
border-bottom-left-radius:48px;
border-bottom-right-radius:48px;
padding-bottom:20px;
height:1450px;
background:url(res/back-img.png) repeat;
}
The code for footer is as follows:
#footer {
border-top: 0px solid #003366;
overflow:visible;
}
.foot {
float:left;
list-style-type:none;
margin-bottom:20px;
background-image:url(res/footer_back.png);
background-repeat:no-repeat;
overflow:visible;
margin-top:-50px;
background-position:0px 120px;
width:182px;
height:180px;
}
img {
border-color:transparent;
}
#site-footer {
width:728px;
margin-left:auto;
margin-right:auto;
}
When I click on tab it shows answer but not increasing its background image height as per jquery code on iphone mobile browser. But it is working fine on windows pc browser.
The content is going behind the footer.
I did Google very much but I am not getting how to resolve this issue.
Please can any one help me out to solve this issue.
Thanks in advance..
Haven't test yet, but try max-height instead of height/ or auto height.
CSS
#main-content1 {
margin-left:auto;
margin-right:auto;
margin-top:35px;
width:900px;
border-top-left-radius:48px;
border-top-right-radius:48px;
border-bottom-left-radius:48px;
border-bottom-right-radius:48px;
padding-bottom:20px;
max-height:1450px; /* height:auto; */
background:url(res/back-img.png) repeat;
}
I'm working on a Facebook-like toolbar for my website.
There's a part of the toolbar where a user can click to see which favorite members of theirs are online.
I'm trying to figure out how to get the div element that pops up to grow based on the content that the AJAX call puts in there.
For example, when the user clicks "Favorites Online (4)", I show the pop up div element with a fixed height and "Loading...". Once the content loads, I'd like to size the height of the div element based on what content was returned.
I can do it by calculating the height of each element * the number of elements but that's not very elegant at all.
Is there a way to do this with JavaScript or CSS? (note: using JQuery as well).
Thanks.
JavaScript:
function favoritesOnlineClick()
{
$('#favoritesOnlinePopUp').toggle();
$('#onlineStatusPopUp').hide();
if ($('#favoritesOnlinePopUp').css('display') == 'block') { loadFavoritesOnlineListing(); }
}
CSS and HTML:
#toolbar
{
background:url('/_assets/img/toolbar.gif') repeat-x;
height:25px;
position:fixed;
bottom:0px;
width:100%;
left:0px;
z-index:100;
font-size:0.8em;
}
#toolbar #popUpTitleBar
{
background:#606060;
height:18px;
border-bottom:1px solid #000000;
}
#toolbar #popUpTitle
{
float:left;
padding-left:4px;
}
#toolbar #popUpAction
{
float:right;
padding-right:4px;
}
#toolbar #popUpAction a
{
color:#f0f0f0;
font-weight:bold;
text-decoration:none;
}
#toolbar #popUpLoading
{
padding-top:6px;
}
#toolbar #favoritesOnline
{
float:left;
height:21px;
width:160px;
padding-top:4px;
border-right:1px solid #606060;
text-align:center;
}
#toolbar #favoritesOnline .favoritesOnlineIcon
{
padding-right:5px;
}
#toolbar #favoritesOnlinePopUp
{
display:block;
border:1px solid #000000;
width:191px;
background:#2b2b2b;
float:left;
position:absolute;
left:-1px;
top:-501px; /*auto;*/
height:500px;/*auto;*/
overflow:auto;
}
#toolbar #favoritesOnlineListing
{
font-size:12px;
}
<div id="toolbar">
<div id="favoritesOnline" style=" <?php if ($onlinestatus == -1) { echo "display:none;"; } ?> ">
<img class="favoritesOnlineIcon" src="/_assets/img/icons/favorite-small.gif" />Favorites Online (<span id="favoritesOnlineCount"><?php echo $favonlinecount; ?></span>)
<div id="favoritesOnlinePopUp">
<div id="popUpTitleBar">
<div id="popUpTitle">Favorites Online</div>
<div id="popUpAction">x</div>
</div>
<div id="favoritesOnlineListing">
<!-- Favorites online content goes here -->
</div>
</div>
</div>
</div>
Maybe you could remove the height property (make sure it's not set in the CSS) and let the DIV expand in height by itself.
Make it a float element and don't use a clearing element after it.
You should take out the CSS height:25px property in the toolbar, the contents will expand the container. Also, ID selector tags are unique and you can specify directly to them without having to reference the ancestor:
INCORRECT:
#toolbar #popUpAction { /*some css */ }
#toolbar #popUpAction a { /*some css */ }
CORRECT:
#popUpAction { /*some css */ }
#popUpAction a { /*some css */ }