hide a textbox if mouseleave beyond a certain time in jQuery - javascript

I have to hide a textbox only if the user hovers out > 2 seconds.
<div id="content">
<input type="text" id="txt1" />
</div>
$('#content').on('mouseleave', function(){
$('#txt1').delay(2000).hide();
});
This will wait for 2 seconds before hiding the textbox. But if the user comes back within 2 seconds it will still hide. How to prevent that from happening?

Use setTimeout/clearTimeout instead:
var clr;
$('#content').on('mouseleave', function () {
clr = setTimeout(function () {
$('#txt1').hide();
}, 2000)
}).on('mouseenter', function () {
clearTimeout(clr)
})
Also note that the delay in your example won't work at all since the .delay() method delays the execution of functions that follow it in the standard effects queue or with a custom queue. It won't delay the no-arguments forms of .show() or .hide() which do not use the effects queue.
jsFiddle example

Use the good ol' fashion setTimeout and clearTimeout
var leaveTimeout;
$('#content').on('mouseleave', function() {
leaveTimeout = setTimeout(function() {
$('#txt1').hide();
}, 2000);
})
.on('mouseenter', function() {
clearTimeout(leaveTimeout);
});

How about a simpler CSS solution: http://jsfiddle.net/2Jtrb/2/.
HTML:
<div id="content">
<input type="text" id="txt1" />
</div>
CSS:
div {
outline: 1px dotted #000;
}
div > input {
visibility: hidden;
-webkit-transition: visibility 2s;
transition: visibility 2s;
}
EDIT: the input will also stay visible if it is focused.
div:hover > input, input:focus {
visibility: visible;
transition-duration: 0s;
}

Try this...
var theTimer;
$('#content').on('mouseleave', function(){
theTimer = setTimeout(function() {
$('#txt1').hide();
}, 2000);
});
$('#content').on('mouseenter', function(){
clearTimeout(theTimer);
});
DEMO

If you use setTimeout you can cancel the timeout if the user enters the text area again. That code looks something like:
var timeoutHandle;
$('#content').on('mouseleave', function(){
timeoutHandle = setTimout(
function () {
timeoutHandle = undefined;
$('#txt1').hide();
}, 2000);
});
$('#content').on('mouseenter', function(){
if (timeoutHandle) clearTimeout(timeoutHandle);
});
By the way, this is similar to what other plugins provide so you might consider looking at the hover intent plugin here: http://cherne.net/brian/resources/jquery.hoverIntent.html.

You can try this:-
var typingTimer;
$('#content').on('mouseleave', function(){
typingTimer = setTimeout(function(){
$('#txt1').hide();
},2000);
});
$('#content').on('mouseenter', function(){
clearTimeout(typingTimer);
});

Use setTimeout function.
var timeout = null;
$('#content').on('mouseleave', function() {
timeout = setTimeout(function() { $('#text1').hide();
});
Then when the user enters the div, clear the timeout.
$('#content').on('mouseenter', function() {
clearTimeout(timeout);
});
I wrote this without looking anything up, so I hope I didn't messed up ;)

Related

How can I run a function several times continuously?

All I'm trying to do is making a winking box. In other word I want to call a function into itself. I have this function:
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click to fade in/out box</button><br /><br /><br />
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
I want when user clicks on the button, that box fade in/out several time continuously as long as the time a request (ajax) takes. Currently when user clicks on the button, that box fades in/out once. Now I want to start fading in/out until a request ends. How can I do that?
Actually I'm trying to make a blinking box when a request is sending.
$(document).ready(function(){
function toggleForever() {
$("#div1").fadeToggle("slow", toggleForever);
}
$("button#start").click(function () {
toggleForever();
});
$("button#stop").click(function () {
$("#div1").stop().animate({opacity:1}, "slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start">Click to fade in/out box</button>
<button id="stop">Click to stop</button><br /><br /><br />
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
The function parameter to fadeToggle gets called when the animation is complete. On another button click, we stop the animation and fade the box in (so it's always visible when we're done, no matter where in the animation we were). In your real code, you'll do that when your AJAX call is complete.
UPDATE
Another approach, using CSS animations instead. One notable difference here is stopping the animation moves abruptly back to full opacity.
$(function () {
$('#start').click(function () {
$('#div1').addClass('blinking');
});
$('#stop').click(function () {
$('#div1').removeClass('blinking');
});
});
.blinking {
animation: blinker 600ms linear infinite alternate;
}
#keyframes blinker { to { opacity: 0; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start">Click to fade in/out box</button>
<button id="stop">Click to stop</button><br /><br /><br />
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
In jQuery there are some global ajax events.
You may listen for ajaxStart, ajaxComplete like in:
$(function () {
$( document ).ajaxStart(function() {
// Start your animation
});
$( document ).ajaxComplete(function() {
// End your animation
});
});
My snippet:
// utility function to wait (simulate ajax)
$.wait = function(ms) {
var defer = $.Deferred();
setTimeout(function() { defer.resolve(); }, ms);
return defer;
};
var isAjaxEnded = true;
$(function () {
$("#div1").click(function(){
$(this).fadeToggle("slow", function() {
if (!isAjaxEnded)
$("#div1").trigger('click');
});
});
$( document ).ajaxStart(function() {
isAjaxEnded = false;
$("#div1").trigger('click');
});
$( document ).ajaxComplete(function() {
// the next line is commented because I'm simulating...
//isAjaxEnded = true;
// End your animation
});
$.getJSON('https://api.github.com/users').done(function(data) {
// just wait only 3 seconds
$.wait(3000).then(function() {
isAjaxEnded = true;
});
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
You can use SetInterval to run the on off cycle continuously and end it with ClearInterval.
var _timer1;
var _timer2;
$(document).ready(function(){
$("#BtnStart").click(function(){
_timer1 = setInterval(function(){ $("#div1").fadeToggle("slow"); }, 500);
_timer2 = setInterval(function(){ $("#div1").fadeToggle("slow"); }, 1000);
});
//Call stop stop annimation
$("#BtnStop").click(function(){
clearInterval(_timer1);
clearInterval(_timer2);
});
});

Show popup on hover only if i hover on li after 1 second

I'm trying to show inner div on hover on li. I'm doing fadeIn and fadeOut effect but the problem is when I hover quickly on all li fadeIn effect work for all. Where it should show only if I hover on li for 1 second and if I leave that element before one second it shouldn't show fadein effect.
<script type="text/javascript">
$(document).ready(function(){
var _changeInterval = null;
$( ".badge_icon" ).hover(function() {
clearInterval(_changeInterval)
_changeInterval = setInterval(function() {
$(this).find(".badges_hover_state").fadeIn(500);
}, 1000);
},function() {
$(this).find('.badges_hover_state').fadeOut(500);
});
});
</script>
I have tried to use stop(), delay() also but didn't get success. At last I tried to do with time interval but now my code has stopped working.
you could use this jquery script:
var myTimeout;
$('#div').mouseenter(function() {
myTimeout = setTimeout(function() {
//Do stuff
}, 1000);
}).mouseleave(function() {
clearTimeout(myTimeout);
});
See the DEMO
Was able to solve this issue by adding window in front of variable name.
var myTimeout;
$('.div').mouseenter(function() {
window.el = $(this);
myTimeout = setTimeout(function() {
el.css("width","200px");
}, 1000);
}).mouseleave(function() {
clearTimeout(myTimeout);
el.css("width","100px");
});

DIV appear/disappear on mouse enter/leave

I'm trying to make a navigation using jQuery. I'm very new to jQuery so I'm getting a bit stuck here.
Basically what I'm trying to do is have testbutton2 appear and hide when I mouse over/off testbutton1. I was able to get this to work with mouseenter/leave.
The part I'm trying to add is to keep testbutton2 visible when I have the mouse over testbutton2 and to keep testbutton2 visible if I cursor back onto testbutton1 - so only fade in or out once.
You'll see from my code exactly what I encountered and probably have a chuckle.
CSS
#testbutton1 {
float:left;
height:100px;
width:100px;
background:#69C;
}
#testbutton2 {
float:left;
height:100px;
width:100px;
background:#0C6;
display:none;
}
HTML
<div id="testbutton1"></div>
<div id="testbutton2"></div>
jQuery
$("#testbutton1").on({
mouseenter: function() {
$("#testbutton2").fadeIn();
},
mouseleave: function() {
$("#testbutton2").fadeOut();
},
});
$("#testbutton2").on({
mouseenter: function() {
$("#testbutton2").fadeIn();
},
mouseleave: function() {
$("#testbutton2").fadeOut();
},
});
JSFiddle
DEMO
Or you can do it in pure css.
Wrap both buttons in a larger div and show the second button only while the mouse hovers over the larger div:
<div id="buttons">
<div id="testbutton1"></div>
<div id="testbutton2"></div>
</div>
#buttons:hover div {
display:block;
}
http://jsfiddle.net/r267b/1/
You can do something like
$("#testbutton1").on({
mouseenter: function () {
$("#testbutton2").fadeIn();
},
mouseleave: function () {
var $target = $("#testbutton2");
//delay the fade out to see whether the mouse is moved to the second button
var timer = setTimeout(function () {
$target.stop(true, true).fadeOut();
}, 200);
$target.data('hoverTimer', timer);
}
});
$("#testbutton2").on({
mouseenter: function () {
//if mouse is moved inside then clear the timer so that it will not get hidden
clearTimeout($(this).data('hoverTimer'));
$(this).stop(true, true).fadeIn();
},
mouseleave: function () {
$(this).stop(true, true).fadeOut();
}
});
Demo: Fiddle
This is solved with timers, as Arun P Johny said...
But as far as I saw, what you want to do is a menu.
Have you thought about using jQuery UI menu widget?
http://jqueryui.com/menu/
I suggest to use status variables that stores if you are hovering over button1 or over button2.
var isOver1 = false;
var isOver2 = false;
Then, add conditions to mouseleave and mouseenter in order to set hide or to alter the status variables, e.g.:
mouseleave: function() {
isOver1 = false;
window.setTimeout( function() {
if (!isOver2) {
isOver2 = false;
$("#testbutton2").fadeOut();
}
}, 50);
The timeout is necessary because if you leave testbutton1, you are not entering testbutton2 at exact the same time. So waiting a bit allows to fire the testbutton2 enter event.
Here is the full demo:
http://jsfiddle.net/KTULJ/2/
Leaving button1 to button2 keeps button2, leaving back to button1 still keeps button2, leaving any button towards the space around hides button2.
With this approach, you don't need to stop an animation as it doesn't start one if it is not necessary.

Delay jQuery fadeIn due to unwanted behavior

How do I make my .right-menu DIV to fadein only after a couple of moments the mouse is hovering its parent .right-menu-background ? The thing is that when you move the cursor quickly in and out, .right-menu DIV is reappearing a lot of times after.
How do I delay animation for few ms?
Here's the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").fadeIn();
}
,function(){
$(this).find(".right-menu").fadeOut();
}
);
});
a easy fix is to use .stop()
$(function () {
$(".right-menu-background").hover(function () {
$(this).find(".right-menu").stop(true, true).fadeIn();
}, function () {
$(this).find(".right-menu").stop(true, true).fadeOut();
});
});
using timer
$(function () {
$(".right-menu-background").hover(function () {
var el = $(this).find(".right-menu");
var timer = setTimeout(function(){
el.stop(true, true).fadeIn();
}, 500);
el.data('hovertimer', timer);
}, function () {
var el = $(this).find(".right-menu");
clearTimeout(el.data('hovertimer'))
el.stop(true, true).fadeOut();
});
});
Use the stop() function in front of fading calls ...stop(true, true)
With those two parameters set to true, the animation queue is cleared and the last animation is played this will get ride of the weird effect
$(this).find(".right-menu").stop(true, true).fadeIn();
Use .delay() function.
Here is the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").delay(800).fadeIn(400);
},function(){
$(this).find(".right-menu").fadeOut(400);
});
});
Check the demo here: http://jsfiddle.net/Mju7X/

How to add delay to jquery mouseover? [duplicate]

This question already has answers here:
Delay jquery hover event?
(6 answers)
Closed 7 years ago.
I have a bunch of images on one page and I am using the following to trigger an event:
$('.img').on('mouseover', function() {
//do something
});
Is there some way to add a delay such that if a user hovers for maybe 1 second, then it does "//do something" or actually triggers the "mouseover" event?
You can use setTimeout
var delay=1000, setTimeoutConst;
$('.img').on('hover', function() {
setTimeoutConst = setTimeout(function() {
// do something
}, delay);
}, function() {
clearTimeout(setTimeoutConst);
});
You could do that using a setTimeout along with a clearTimeout if the user leaves too soon:
var timer;
var delay = 1000;
$('#element').hover(function() {
// on mouse in, start a timeout
timer = setTimeout(function() {
// do your stuff here
}, delay);
}, function() {
// on mouse out, cancel the timer
clearTimeout(timer);
});
Use a timer and clear it when they mouseout incase they leave within 1000ms
var timer;
$('.img').on({
'mouseover': function () {
timer = setTimeout(function () {
// do stuff
}, 1000);
},
'mouseout' : function () {
clearTimeout(timer);
}
});
I was looking for something like this as well, but with a secondary delay as well. I took one of the answers here and expanded upon it
This example shows a div after X seconds of mouseover and hides it after X seconds of mouseout. But disables if you hover over the shown div.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
.foo{
position:absolute; display:none; padding:30px;
border:1px solid black; background-color:white;
}
</style>
<h3 class="hello">
<a href="#">Hello, hover over me
<span class="foo">foo text</span>
</a>
</h3>
<script type="text/javascript">
var delay = 1500, setTimeoutConst,
delay2 = 500, setTimeoutConst2;
$(".hello").mouseover(function(){
setTimeoutConst = setTimeout(function(){
$('.foo').show();
},delay);
}).mouseout(function(){
clearTimeout(setTimeoutConst );
setTimeoutConst2 = setTimeout(function(){
var isHover = $('.hello').is(":hover");
if(isHover !== true){
$('.foo').hide();
}
},delay2);
});
</script>
Working example
You can use jquery .Delay like this (not tested):
$("#test").hover(
function() {
$(this).delay(800).fadeIn();
}
);
http://api.jquery.com/delay/

Categories

Resources