I need to do one thing.
I have element on webside. When user hover the mouse on this item i need to for example display alert. But with delay: When user hover the mouse on item and after one second mouse is still on item the alert will display. I can do it but i want to do the same when mouse leave the same item (when mouse leave item and after one second is still outside item). Now i use this code but of course it dosen't work with leaving
$('.test').hover(function(){
mytimeout = setTimeout(function(){
alert("enter");
}, 1000);
}, function(){
clearTimeout(mytimeout);
});
$('.test').mouseleave(function() {
alert("escape");
});
Of course i'm not going to use this with alerts ;)
I have no idea how to do it. Hover in hover? Or use something else?
Thank you for your help and sorry for my english.
You'd need timeouts in both blocks, enter/leave, such as below:
var $demo = $("#demo");
var timer;
$('.test').hover(function() {
//Clear timeout just in case you hover-in again within the time specified in hover-out
clearTimeout(timer);
timer = setTimeout(function() {
$demo.text("enter");
}, 1000);
}, function() {
//Clear the timeout set in hover-in
clearTimeout(timer);
timer = setTimeout(function() {
$demo.text("exit");
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="test">Hover me!</button>
<div id="demo"></div>
You almost had it. The jquery hover function takes two parameters an onHoverStart (or onMouseOver) handler and an onHoverStop (or onMouseLeave) handler. You just need to add the alert to the onHoverStop handler.
$('#test').hover(function(){
setTimeout(function(){
alert("enter");
}, 1000);
}, function(){
setTimeout(function(){
alert("escape");
}, 1000);
});
Working fiddle.
You can follow the same idea in mouseleave if you want, you need just to clear the timer timer_mouseleave on hover event :
var timer_mouseleave;
$('.test').hover(function(){
clearTimeout(timer_mouseleave);
mytimeout = setTimeout(function(){
alert("enter");
}, 2000);
}, function(){
clearTimeout(mytimeout);
});
$('.test').mouseleave(function() {
timer_mouseleave = setTimeout(function(){
alert("escape");
}, 2000);
});
Hope this helps.
Try this one. Just need to reset timeout on each hover event.
(function(){
var mytimeout = null;
$('.test').hover(function(){
clearTimeout(mytimeout);
mytimeout = setTimeout(function(){
alert("enter");
},1000);
});
})();
Related
What I am trying to do is only run my code when someone has hovered on an element for 1 second.
Here is the code that I am using:
var timer;
$(".homeLinkWrap").mouseenter(function() {
timer = setTimeout(function(){
$(this).find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({opacity: '1'});
console.log('in');
}, 1000);
}).mouseleave(function() {
$(this).find('.homeLinkNfo').removeClass('flipInY').addClass('flipOutY');
console.log('out');
clearTimeout(timer);
});
The first part (mouseenter) IS NOT functioning and DOESN'T remove the class and then add the new one. The second one (mouseleave) IS functioning properly and DOES remove the class and add the new one.
I am guessing it is because I am targeting $(this) which is the current element being hovered over and since it is in a timer function jQuery doesn't know which element $(this) is referring to.
What can I do to remedy this?
I think it is because you are calling $(this) inside the setTimeout function. You need to do something like this:
$(".homeLinkWrap").mouseenter(function() {
var $self = $(this);
timer = setTimeout(function(){
$self.find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({opacity: '1'});
console.log('in');
}, 1000);
});
Inside the setTimeout callback, this no longer refers to the jQuery selection. You should either keep a reference to the selection:
$(".homeLinkWrap").mouseenter(function() {
var $this = $(this);
timer = setTimeout(function(){
$this.find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({opacity: '1'});
console.log('in');
}, 1000);
})
Or use an arrow function (ES2015)
$(".homeLinkWrap").mouseenter(function() {
timer = setTimeout(() => {
$(this).find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({opacity: '1'});
console.log('in');
}, 1000);
})
The problem here is that the this inside the callback function that you're passing to setTimeout doesn't reference to the same point that the this outside the callback does.
There are some ways of solving your problem, I'll suggest you to use Function.prototype.bind to bind your callback function to the same this you have outside:
var timer;
$(".homeLinkWrap").mouseenter(function() {
timer = setTimeout((function() {
$(this).find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({ opacity: '1' });
}).bind(this), 1000);
}).mouseleave(function() {
$(this).find('.homeLinkNfo').removeClass('flipInY').addClass('flipOutY');
clearTimeout(timer);
});
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.
I have a fancybox for displaying photos and descriptions of them.
Now it opens fancybox on mouseenter event. It works perfectly with this code:
$('.fancy_link').live('mouseenter', mouseEnter);
function mouseEnter()
{
jQuery(this).fancybox().trigger('click');
return false;
}
But i need to set delay for opening fancybox. How it should work: User moves cursor over a link, after 1 second fancybox should open and display content. If user moves mouse away before waiting 1 second, fancybox should not open.
I have tried JQuery delay() and setTimeout() but both of them are not working properly.
One sec. delay just ignored by both methods.
use setTimeout/clearTimeout...
//binding code...
$('.fancy_link').on('mouseenter',mouseEnter);
$('.fancy_link').on('mouseleave', mouseLeave);
//run when the mouse hovers over the item
function mouseEnter() {
//clear any previous timer
clearTimeout($(this).data('h_hover'));
//get a reference to the current item, for the setTimeout callback
var that = this;
//set a timer, and save the reference to g_hover
var h_hover = setTimeout(function(){
//timer timed out - click the item being hovered
$(that).click();
}, 1000);
//save the reference - attached to the item - for clearing
// data is a generic "store", it isn't saved to the tag in the dom.
// note: if you have a data-* attribute it is readable via data()
$(this).data('h_hover',h_hover)
}
//handler for when the mouse leaves the item
function mouseLeave() {
//clear the previously set timeout
clearTimeout($(this).data('h_hover'));
}
this could help you
function openFancybox() {
setTimeout( function() {$('#fancy_link').trigger('click'); },1000);
}
I imagine you will need to use setTimeout and clearTimeout
Something along these lines:
var timer;
$('.fancy_link').mouseenter(function(){
var $this = $(this);
timer = setTimeout(function(){
$this.fancybox().trigger('click');
}, 1000);
}).mouseleave(function(){
clearTimeout(timer);
});
Try this solution:
var timer = null;
$('.fancy_link').on('mouseenter', function() {
timer = setTimeout(mouseEnter, 1000);
});
// clear timer when mouse leaves
$('.fancy_link').on('mouseleave', function() {
clearTimeout(timer);
});
I want if user moved the mouse for two seconds (Keep the mouse button for two seconds) on a class, show to he hide class. how is it? ()
If you move the mouse tandem (several times) on class, You will see slideToggle done as automated, I do not want this. How can fix it?
DEMO: http://jsfiddle.net/tD8hc/
My tried:
$('.clientele-logoindex').live('mouseenter', function() {
setTimeout(function(){
$('.clientele_mess').slideToggle("slow");
}, 2000 );
}).live('mouseleave', function() {
$('.clientele_mess').slideUp("slow");
})
Please try this below link Your Problem will solve
http://jsfiddle.net/G3dk3/1/
var s;
$('.clientele-logoindex').live('mouseenter', function() {
s = setTimeout(function(){
$('.clientele_mess').slideDown();
}, 2000 );
}).live('mouseleave', function() {
$('.clientele_mess').slideUp("slow");
clearTimeout(s)
})
Write your html like this
<div class="clientele-logoindex">Keep the mouse here
<div class="clientele_mess" style="display: none;">okkkkkkko</div></div>
Record when a timer is started and check if one exists before starting a new one:
window.timer = null;
$('.clientele-logoindex').live('mouseenter', function() {
if(!window.timer) {
window.timer = setTimeout(function(){
$('.clientele_mess').slideToggle("slow");
window.timer = null;
}, 2000 );
}
}).live('mouseleave', function() {
$('.clientele_mess').slideUp("slow");
})
Take a look at hoverIntent is a jquery plugin to ensure hover on elements.
I am trying to build a simple navigation with sub-navigation drop-downs. The desired functionality is for the drop-down to hide itself after a certain amount of seconds if it has not been entered by the mouse. Though if it is currently hovered, I would like to clearTimeout so that it does not hide while the mouse is inside of it.
function hideNav() {
$('.subnav').hover(function(){
clearTimeout(t);
}, function() {
$(this).hide();
});
}
$('#nav li').mouseover(function() {
t = setTimeout(function() { $('.active').hide()}, 4000);
//var liTarget = $(this).attr('id');
$('.active').hide();
$('.subnav', this).show().addClass('active');
navTimer;
hideNav();
});
What am I missing? Am I passing the handle wrong?
You should also clear the timeout in mouseover, before setting the new timeout.
Otherwise a timeout started before will still be active, but no longer accessible via the t-variable.
you can make the timer variable global.
function hideNav() {
$('.subnav').hover(function(){
clearTimeout(window.t);
}
}
$('#nav li').mouseover(function() {
window.t = setTimeout(function() { $('.active').hide()}, 4000);
});
Try doing it the recommended way (JS statement as a string):
t = setTimeout("$('.active').hide()", 4000);