Develop Reference

Jquery/JS malfunction when window is not visible

I'm using JS to make a simple function that displays 3 items one at a time. Works well when you're looking at the page, but when you minimize or change tabs then return, all three items are shown.
Anyone know why? It's as if fadeIn(x) keeps running but hide() stops working. I even checked with different classes.
Here is the code:
$(document).ready(function () {
function start() {
$(".featured-items").hide();
$( ".item-1" ).fadeIn('slow');
setTimeout(one, 5000);
}
function one() {
$(".featured-items").hide();
$( ".item-2" ).fadeIn('slow');
setTimeout(two, 5000);
}
function two() {
$(".featured-items").hide();
$( ".item-0" ).fadeIn('slow');
setTimeout(start, 5000);
}
setTimeout(start, 5000);
});
Problem solved, check the best answer below and make sure to read comments to get a good understanding. Thanks to all

(Updated to provide complete answer)
Your original code is too complex, and a more flexible and simpler implementation is to have just one function, and an array of items in the gallery. Secondly, you should modify your code so the fadeIn animation starts immediately instead of getting queued. Having only one function instead of several makes alterations such as this easier.
Note that in the code below, as in your original code, the various gallery items are classes rather than single element ids and could fade in multiple items.
var gallery = [ '.item-1', '.item-2', '.item-3' ];
var i = 0;
function galleryEvent() {
$(".featured-items").hide();
$( gallery[i] ).fadeIn({duration: 'slow', queue: false});
i = (i + 1) % gallery.length;
setTimeout(galleryEvent, 5000);
}
// start everything off....
galleryEvent();

Show DIV.bravo only when DIV.alpha has finished its .delay()

How do I show div.Bravo straight after div.alpha has finished it's .delay(1000)?
I've tried the following, and found that .bravo occasionally appears when .alpha is still shown. I assume an if statement should be used here, but I haven't been able to conjure anything that works.
$(".alpha").delay(1000).hide(0);
$(".bravo").delay(1000).show(0);
Any ideas?

Only use one delay, and switch the elements at the same time:
$(".alpha").delay(1000).hide(0, function(){
$(".bravo").show(0);
});
Or use a timeout instead of delay:
window.setTimeout(function(){
$(".alpha").hide(0);
$(".bravo").show(0);
}, 1000);

you can put it in the callback function:
$(".alpha").delay(1000).hide(0, function() {
//whatever you put here will happen after .alpha finishes hiding
$(".bravo").delay(1000).show(0);
})

How to call a Javascript Function and make it perform twice properly?

Good evening, I have a javascript function to set background color, etc when user onclick the table row. The function does not perform correctly unless it is called twice or when I press F12 for development tools, similar situation as Function doesn't correctly perform unless it is called twice.
I managed to handle it as below but the problem is that, when the user onclick the table row, it needs around 2-3 seconds for the background color to be change. How can I reduce the time for the function to perform twice?
JavaScript
<SCRIPT LANGUAGE="JavaScript">
setBackGroundColorOnIE (tableRowNumber) {
//........
//........
setBackGroundColorOnIE (tableRowNumber)//I need the function to perform twice in one call
}
</SCRIPT>
I know it is a bad practice, but I'm really have no idea on how to fixed the compability issues in IE9. So, I came out with something like this. Need some hints and advices, thanks in advanced.

you could add some condition to check if your function need to run again, like:
function setBackGroundColorOnIE (tableRowNumber) {
//check if your condition is met
if( some_condition) {
var timerId = setTimeout(function() {
setBackGroundColorOnIE (tableRowNumber);
}, 5000); //set to 5 seconds
}
else {
clearTimeout ( timerId );
}
}
//call the function
setBackGroundColorOnIE(some_value);

An easy solution would be to include jquery ui which would allow you to change the color and then have a callback when the color change is completed. Here is a JS fiddle with jquery and jquery ui. http://jsfiddle.net/kqMs9/
$(function(){
$('button').on('click', function(){
$('.background').animate({
backgroundColor: '#000'
}, 1500, function(){ alert('background-color changed!');});
});
});

How do I create a pause or delay when hovering over javascript list items?

hoping someone can help.
I'm a javascript novice. I have a list of names that, when hovered over, display a box with that person's contact information.
The problem I'm having is that the box displays too fast; causing boxes to fire off rapidly when mousing over multiple names.
Link: http://law.nd.edu/faculty/
Here's what I believe is the relevant code:
<script>
jQuery(".directory-list li").hover(
function() {
jQuery(this).find(".directory-info").fadeIn(200); ;
},
function() {
jQuery(this).find(".directory-info").fadeOut(50);;
}
);
</script>
Thanks for any help.

Use hoverIntent instead.
There is a nice little plugin for it, that is the easiest way to do it.
http://cherne.net/brian/resources/jquery.hoverIntent.html
It will keep your elements from rapid-firing.

The easiest way would be to add a delay before your fadeIn:
jQuery(this).find(".directory-info").delay(300).fadeIn(200);

You can introduce a delay by using setTimeout as follows:
var hoverTimer;
jQuery(".directory-list li").hover(function() {
var elem = jQuery(this).find(".directory-info");
hoverTimer = setTimeout(function() {
elem.fadeIn(200);
}, 1000); // wait for one second and then fadeIn
},
function() {
clearTimeout(hoverTimer);
jQuery(this).find(".directory-info").fadeOut(50);
});

Check out this fiddle, think this is what you want. The other answer that uses timeoutes will loose the context of this inside the setTimeout() function and will not work.
http://jsfiddle.net/RZUVS/1/.

Destroying a function when exiting a matched breakpoint with enquire.js

This is probably basic to most reading, but I can't seem to figure it out.
I have a little test function that I want to execute if under a certain width. When the screen rotates or gets resized above that width, I want the function to cease to work. Here is some example code for simplicity sake.
enquire.register("screen and (max-width:500px)",{
match : function() {
$(".block .block-title").click(function(){
alert("Hello World!");
});
}
}).listen();
So if the page loads above 500px, it works as intended. Clicking won't execute. If the page loads at 500px or below, the click function executes. Only problem is that if you resize the viewport or change orientation to something above 500px, the function still executes. I'd like to be able to disable that.
The real world scenario I'm actually trying to do here is I have an un-ordered list of 4 items. Above a certain width they are displayed right away. If under a certain width, I just want to hide them and on click show them. I know there are a few ways to do it (.toggle(), .toggleClass("myclass"), etc).
I have done this a bunch of times but I always get caught with the entering / exiting break points and things not being reset, or working as intended. Usually it doesn't matter, but lately in some of my use cases it has mattered.
I know of the unmatch option but I'm not sure how to really kill the matched function above.
enquire.register("screen and (max-width:500px)",{
match : function() {
$(".block .block-title").click(function(){
alert("Hello World!");
});
},
{
unmatch : function() {
// what do I do here do kill above?
}
}
}).listen();
Any help would be appreciated. I am pretty sure it will help my current situation but will also help me expand my knowledge of enquire.js for other things.
Thanks.
edit: I forgot to mention... if you load the page under 500px, then resize or orientate wider then 500px, then go BACK under 500px, the click function won't work again.. which confuses me also. I basically was hoping it would work no matter what when under 500px, and not work at all when over 500px.

I'm the author of enquire.js, so hopefully I'll be able to help you ;-)
Basically, you want to add an event handler on match and remove event handler on unmatch. You seem to have the gist of how to do this above, but you've got the syntax a little wrong. Once the syntax is corrected it's just some jQuery knowledge to remove the click handler.
So let's look at how the syntax should be:
enquire.register("screen and (max-width:500px)", {
match: function() {
//match code here
},
unmatch: function() {
//unmatch code here
}
}).listen();
Notice that match and unmatch are part of a single object supplied to register.
Ideally you should be putting this in your document ready callback. To assign your click handler use jQuery's on method, as this allows you to use the off method to unassign:
$(".block .block-title").on("click", function() {
alert("hello");
});
$(".block .block-title").off("click");
This is great because you can even namespace your events, read up on the jQuery docs for more details on this. So to put it all together, we would have this:
$(document).ready(function() {
var $target = $(".block .block-title");
enquire.register("screen and (max-width:500px)", {
match: function() {
$target.on("click", function() {
alert("Hello World!");
});
},
unmatch: function() {
$target.off("click");
}
}).listen();
});​
You can find a working example here: http://jsfiddle.net/WickyNilliams/EHKQj/
That should then be all you need :) Hope that helps!