Develop Reference

why setInterval() cycle goes faster every time?

I'm building a custom slider on Javascript , and I want that every time the user clicks on a div of the slider, the slider should stop for X seconds.
My code is:
$(document).ready(function () {
var ciclo;
var index_slide = 1;
function startSlidercicle() {
ciclo = setInterval( function() {
// Slider code goes here
}, 3000);
}
//Here I start the slider animation
startSlidercicle();
//When the user clicks on a div called 'slide', stop the cycle and start again the animation cycle
$('.slide').on('click', function() {
clearInterval(ciclo);
setTimeout(startSlidercicle(), 3000);
});
});
But the problem is that everytime I click and stop the slider, the cycle starts faster and faster. How can I fix it?

Instead of:
clearInterval(ciclo);
setTimeout(startSlidercicle(), 3000);
or:
clearInterval(ciclo);
setTimeout(startSlidercicle, 3000);
I changed the code to be:
clearInterval(ciclo);
startSlidercicle();
And now the slider just works fine. I think that, in the first two proposals, every time I click on the div, a new function is created, "overlapping" over the existing cycle and, thus, it looks like the slider speeds up, but its just one cycle starting over another.

You need to change this:
clearInterval(ciclo);
setTimeout(startSlidercicle(), 3000);
to this:
clearInterval(ciclo);
setTimeout(startSlidercicle, 3000);
In your existing code, you are calling startSlidercirle immediately and it is not waiting until the setTimeout() fires because you have the () after the function name. That means to execute it immediately and pass the result of executing that to setTimeout(). You want to just pass the function reference to setTimeout() which is done by just having the name of the function with no () after it. This is a common mistake.

jQuery Isotope queue shuffle/randomize animation

I would like to set the jQuery Isotope shuffle method to to perform an animated shuffle of the loaded DOM elements every 30 seconds that someone is on the page with the plugin loaded.
I have had success tying the animation to a .hover() event, but I cannot seem to get it to fire when I use setInterval() or .queue(). I want the animation to fire regardless of user interaction/input.
var iso_shuffle = function() {
$('#isotope').isotope('shuffle');
}
setInterval(iso_shuffle(), 2500);
Why does the previous code not trigger the randomization, yet this does:
$('#isotope').hover(function() {
iso_shuffle()
});
Cheers

iso_shuffle() calls the function immediately. The function returns nothing. So your setInterval is actually doing the equivalent of:
setInterval(undefined, 2500);
You want to use the function name as the callback for setInterval:
setInterval(iso_shuffle, 2500);

You need to pass the function itself, not its return value:
setInterval(iso_shuffle, 2500);

Is there anyway on onmouseover to fire after mouseovering after a few seconds?

I want to make sure the user wants to have something pop up by mouseing over a div. I don't want the user to accidentally trigger something to pop up without intent. setTimeout doesn't work because even if it's very brief, the pop up will still pop up, it's just delayed. What I want is the user to mouseover something for 1sec for a pop up to display.
**update:
When I do this:
<div onmouseover="myTimer=setTimeout('display(this)', 5000);">
the timer works and it is displayed after 5 seconds but this is not passed and I can't get the element via $(element).next(), etc.
When I do this:
<div onmouseover="myTimer=setTimeout(display(this), 5000);">
the timer doesn't work. What is wrong, how can I get the timer and the this to be passed?
Thanks!
**update2: the this problem from here states: "Code executed by setTimeout() is run in a separate execution context to the function from which it was called. As a consequence, the this keyword for the called function will be set to the window (or global) object, it will not be the same as the this value for the function that called setTimeout."
I found the answer to overcome this here where you have to "save a reference to the context where the setTimeout function call is made"

This should work for you:
<div id="example">Hover me</div>
<script type="text/javascript">
(function(){
var timer;
var el = document.getElementById('example');
el.onmouseover = function(){
timer = setTimeout(function(){
display(el);
// If display takes no arguments and uses the "this" keyword inside it
// Use display.call(el); instead
}, 1000);
}
el.onmouseout = function(){
clearTimeout(timer);
}
})();
</script>
Example on JSFiddle

I'm pretty sure that this should works:
onmouseover="myTimer=setTimeout(yourFunctionName, 1000);"
You have also to add:
onmouseout="clearTimeout(myTimer);"

On mouse over you can start a timer. On mouse out reset the timer to 0. If the timer reaches 1s, you can trigger your event and reset the timer to 0.

I also later came across something called the hoverIntent jQuery Plug-in, worth checking out.

fadeout function along with slidetoggle function

When I submit my form, the last function I have is:
$("#message").show().delay(5000).fadeOut();
This will show my thank you message for 5 seconds, and then fade the "message" div out.
I then tried adding this function below it:
$("#slide_panel").slideToggle("slow");
because I want the form (which is inside the #slide_panel div) to close / slide up AFTER the 5 second delay.... but when I add this function, its almost like the 5 second delay doesn't exist and the success message shows for about half a second and then the whole contact form dissapears as its supposed to.
What is wrong with my code?
$("#message").show().delay(5000).fadeOut();
$("#slide_panel").slideToggle("slow");

delay function applies only to animation queue. you can use the following code by passing a call back function to fadeOut()
$("#message").show().delay(5000).fadeOut('fast', function(){
$("#slide_panel").slideToggle("slow");
});
Now the slideToggle will run once the animation is completed.

You can update the code to the following ...
$("#message").show().delay(5000).fadeOut(function(){
$("#slide_panel").slideToggle("slow");
});
That is, add the slideToggle of SlidePanel in the message callback. For more ideas, check http://jsfiddle.net/sf2Nr/1/

This has to do with the asynchronous behavior of the animation functions in jQuery.
In order to activate the slideToggle after the fadeOut delay, you must call it from the fadeOut's callback function, i.e.:
$("#message").show().delay(5000).fadeOut(0, function() {
$("#slide_panel").slideToggle("slow");
});

How to hide a text after 5 sec using jQuery?

How can I hide the #results after 5 secs ? I tried this but it does not work.
$('#results').hide().html(data).fadeIn('slow').delay(5000).hide();
What I had is this one
$('#results').hide().html(data).fadeIn('slow');

Put a duration on your hide() call and it will work like this:
$('#results').hide().html(data).fadeIn('slow').delay(5000).hide(1);
The issue is that hide() without any parameters is just an immediate operation. It doesn't go through the fx queue so therefore, it doesn't come after the .delay(5000). But, if you give a duration to the function like .hide(1), then it becomes an animation and it goes through the fx queue and thus will come after the .delay(5000).
You can see it work here: http://jsfiddle.net/jfriend00/wzbtU/
From the jQuery doc for hide():
When a duration is provided, .hide() becomes an animation method.

Do you mean something like:
$('#results').hide().html(data).fadeIn('slow');
setTimeout(function() {
$('#results').hide();
}, 5000);

You'd have to use setTimeout.
setTimeout("$('#results').hide().html(data).fadeIn('slow');", 5000);
The reason why .delay(5000) doesn't work is because .hide() isn't included in the animation queue.

The jQuery's fadeOut method is nifty:
$('#results').delay(3000).fadeOut('slow');