We Keep Coding

JQuery .slideUp() after time OR mouseleave

I got an element that is slided down by JQuery using .slideDown() method
$('#dropdown_shopping_cart').slideDown(800);
Now i want it to slide up after 6 seconds, but only if there is no hover on the element, if there is an hover, it should not .slideUp().
So far i worked with a timeout that added display:none to the element while i was giving the element´s hover display:block!important; in CSS so it would not get display: none until the hover is over.
JS
setTimeout(function () {
$('#dropdown_shopping_cart').css('display', 'none');
}, 6000);
_______________________________________________________
CSS
#dropdown_shopping_cart:hover {
display: block!important;
}
Now i want to add the .slideUp() to this.

Check this:
var myVar;
myVar = setTimeout(function() {
$('#dropdown_shopping_cart').slideUp(800)
}, 6000);
$("#dropdown_shopping_cart").hover(
function() {
clearTimeout(myVar);
},
function() {
myVar = setTimeout(function() {
$('#dropdown_shopping_cart').slideUp(800)
}, 6000);
}
);
By default shopping cart will slideUp() after 6 seconds, if mouse hover action occured, setTimeOut will be cleared, after mouse leave the shopping cart, setTimeOut will setted automatically

You can clear the timeout on mouseenter and reset it on mouseleave like this:
var hide_div_to;
function hideDiv(){
hide_div_to = setTimeout(function () {
$('#dropdown_shopping_cart').slideUp(800);
}, 6000);
}
$('#dropdown_shopping_cart').slideDown(800,hideDiv());
$('#dropdown_shopping_cart').mouseenter(function(){
clearTimeout(hide_div_to);
});
$('#dropdown_shopping_cart').mouseleave(function(){
hideDiv();
});
Here is a working JSFiddle
UPDATE
If you don't wan't to wait the timeout again when you leave, after the timeout is reached, you can do this:
$('#dropdown_shopping_cart').slideDown(800);
setTimeout(function () {
if(!$('#dropdown_shopping_cart').is(':hover')){
$('#dropdown_shopping_cart').slideUp(800);
}
else{
$('#dropdown_shopping_cart').mouseleave(function(){
$('#dropdown_shopping_cart').slideUp(800);
});
}
}, 3000);
And here is a JSFiddle and here is another one that shows how this can be triggered multiple times.

Id suggest you work with mouseover and a class:
$('#dropdown_shopping_cart').hover(function(){
if(!$('#dropdown_shopping_cart').hasClass('active'))
{
$(this).addClass('active');
}
else
{
$(this).removeClass('active');
}
},
function() {
var myVar = setTimeout(function() {
if(!$('#dropdown_shopping_cart').hasClass('active'))
{
$('#dropdown_shopping_cart').slideUp()
}
}, 6000);
})
And than in your setTimeout Function you add:

demo: http://jsfiddle.net/yo5gnvy3/7/
$('#dropdown_shopping_cart').hide().slideDown(800, function () {
var events = $._data($(this)[0], "events") || {};
if (events.mouseover === undefined) {
$(this).delay(1000).slideUp()
}
});

How to clear setTimeout on jQuery mouseover #id

This is my current code to run the series of setTimeout functions. How do I stop these when either the mouse moves, or is over a certain element?
$( document ).ready(function() {
clicky()
function clicky() {
setTimeout(function () {jQuery('#1500').trigger('click');}, 3000);
setTimeout(function () {jQuery('#1990').trigger('click');}, 6000);
setTimeout(function () {jQuery('#2010').trigger('click');}, 9000);
setTimeout(function () {jQuery('#battle').trigger('click');}, 12000);
setTimeout(function () {
jQuery('#water').trigger('click');clicky()
}, 15000);
}
});

You essentially need to save a reference to your timeouts so that they can be cleared when you need them to be. In the following example, I just used an object so that you could specify which timeout you wanted to affect, if desired.
Here's a working fiddle that will clear the timeouts on hover, then reset them when the mouse leaves: http://jsfiddle.net/6tQ4M/2/
And the code:
$(function(){
var timeouts = {};
function setTimeouts () {
timeouts['#1500'] = specifyTimeout('#1500', 3000);
timeouts['#1990'] = specifyTimeout('#1990', 6000);
timeouts['#2010'] = specifyTimeout('#2010', 9000);
timeouts['#battle'] = specifyTimeout('#battle', 12000);
timeouts['#water'] = specifyTimeout('#water', 15000, function(){
console.log('reset the timeouts');
clearTimeouts();
setTimeouts();
});
}
function clearTimeouts () {
for(var key in timeouts){
if(timeouts.hasOwnProperty(key)){
clearTimeout(timeouts[key]);
delete timeouts[key];
}
}
}
function specifyTimeout (id, time, callback) {
return setTimeout(function(){
$(id).trigger('click');
if(callback){
callback();
}
}, time);
}
$('a').on('click', function(){
$('#projects').append('clicky clicky!');
});
$('#map').on('mouseover', clearTimeouts);
$('#map').on('mouseleave', setTimeouts);
setTimeouts();
});
Let me know if you have any questions about the code at all!

Your setTimeout needs to be defined to a variable, so that it can be cleared by passing to clearTimeout(). Something like:
var interval = setTimeout(function() {
//msc
}, 8000);
window.clearTimeout(interval);

Well, according to what you ordered, when you hover an area, the setTimeOut should be fired, and when you are out of this region, the setTimeOut should be reset.
This is the code:
HTML
<div id="map"></div>
CSS
#map{
width:100px;
height:100px;
background-color: black;
}
Javascript
var timeoutHandle;
$('#map').mouseover(function(event){
window.clearTimeout(timeoutHandle);
});
$('#map').mouseout(function(event){
timeoutHandle = window.setTimeout(function(){ alert("Hello alert!"); }, 2000);
});
Basically you should keep a reference to the setTimeOut, in this case the variable is timeoutHandle, call clearTimeOut on mouse over and call setTimeOut again to reset the timer.
Here is the jsFiddle:
http://jsfiddle.net/bernardo_pacheco/RBnpp/4/
The same principle can be used for more than one setTimeOut timer.
You can see more technical details here:
Resetting a setTimeout
Hope it helps.

How to detect whether mouseout is true or not?

I have this simple fiddle as a working example-
Jsfiddle
I am trying to detect mouseout event from a div section.
When i mouseover on this image it shows caption; saying "Change Image". After 5 seconds caption goes fadeOut.
I am using setInterval to set it accordingly. Now if I do mouseout of this image, then only I want Interval function should be called.
How do i detect mouseout event in jQuery?
Tried-
$(function () {
$('.image-profile').mouseover(function () {
$('.change-image').stop().show();
if ($('.image-profile').mouseout()== true) {
TimeOut();
}
});
setInterval(function TimeOut() {
$('.change-image').fadeOut()
}, 5000
);
});

var ImageProfileTimer;
$('.image-profile').on('mouseenter',function(){
clearTimeout(ImageProfileTimer);
$('.change-image').stop().show();
}).on('mouseleave',function(){
ImageProfileTimer = setTimeout(function(){
$('.change-image').fadeOut()
}, 5000);
});
Use setTimeout and clearTimeout
Demo : http://jsfiddle.net/xMNTB/9/

$('.image-profile').on('mouseleave', function() {
setTimeout(function() {
$('.change-image').fadeOut()
}, 5000);
});

http://jsfiddle.net/xMNTB/7/
Now the div show up on mouse enter and disappears 5 seconds after mouse leave.
$(function () {
$('.image-profile').mouseenter(function () {
$('.change-image').stop().show();
});
$('.image-profile').mouseleave(function () {
setTimeout(function TimeOut() {
$('.change-image').fadeOut()
}, 5000);
});
});

Try This:
(function () {
$('.image-profile').mouseover(function () {
$('.change-image').stop().show();
if ($('.image-profile').mouseout() == true) {
TimeOut();
}
}).mouseout(function () {
setInterval(function TimeOut() {
$('.change-image').fadeOut()
}, 5000);
});
});
JSFIDDLE DEMO

using jQuery Glow in Intervals

I want to use this jquery glow plugin in my page. (DEMO)
and I want my text blinks every 4 second. I write this code but it does not work.
$(document).ready(function () {
$('.white').addGlow({ textColor: 'white', haloColor: '#aaa', radius: 100 });
setInterval(function () {
$('.white').mouseenter();
setTimeout(function () { }, 2000);
$('.white').mouseleave();
}, 2000);
});
how I can do this?
thanks

Though I'm no fan of faking an effect if the plugin does not provide an api for it (meaning the lack of possibility to trigger the glow in the jquery-glow plugin), here is a possible solution:
http://jsfiddle.net/3LCdA/
(function loop() {
$('.green').mouseover();
setTimeout(function () {
$('.green').mouseout();
setTimeout(loop, 2000);
}, 2000);
}());
or with parameters:
http://jsfiddle.net/3LCdA/1/
(function loop(el, delay) {
el.mouseover();
setTimeout(function () {
el.mouseout();
setTimeout(function () {
loop(el, delay);
}, delay);
}, delay);
}($('.green'), 2000));

end a setTimeout function before its set time

i have a jquery function that when clicked produces a set timeout on making a div visible.
however, if another option is selected during the settimeout length, i would like to know how to destroy this function and stoop anything else in it happening.
my current code is:
$(document).ready(function () {
$('li#contact').click(function () {
$('ul.image_display').css('display', 'none');
$('ul.projects').fadeOut().hide();
$('li#cv').removeClass('cur');
$('li#projects').removeClass('cur');
$('li#contact').addClass('cur');
$('ul.contact').fadeIn(function () {
setTimeout(function () {
$('ul.contact').fadeOut('slow');
}, 8000);
});
setTimeout(function () {
$('li#contact').removeClass('cur');
$('li#cv').addClass('cur');
$('ul.projects').fadeIn('slow');
$('ul.image_display').css('display', 'block');
}, 8625);
});
});
a bit cumbersome but works until this is clicked:
$(document).ready(function () {
$('#projects').click(function () {
$('li#cv').removeClass('cur');
$('ul.contact').fadeOut().hide();
$('#contact').removeClass('cur');
$('ul.projects').fadeIn('slow');
$('#projects').addClass('cur');
$('ul.image_display').css('display', 'block');
});
});
if the second is clicked just after the first than class 'cur' still comes up on li#cv after the set time.

The setTimeout function returns an identifier to that timeout. You can then cancel that timeout with the clearTimeout function. So you can do something like this (fill in the blanks with your code):
var timer;
$(function() {
$(...).click(function() {
...
timer = setTimeout(...);
...
});
$(...).click(function() {
clearTimeout(timer);
});
});
It's not particularly super clean to keep a global variable for this, however. You could store the timer in the data attribute of whatever element makes the most sense for your situation. Something like this:
$(function() {
$(...).click(function() {
...
var timer = setTimeout(...);
$(someelement).data('activetimer', timer);
...
});
$(...).click(function() {
var timer = $(someelement).data('activetimer');
if(timer) {
clearTimeout(timer);
$(someelement).removeData('activetimer');
}
});
});
It doesn't really look cleaner, but it's an alternative way to store the timer...

You can use clearTimeout() to do that. You'll need to keep the return value from setTimeout() in a variable to pass to clearTimeout().