I can't seem to figure out the logic here. I have a an element that hides until the mouse is moved (utilBar) and i want it to stay displayed even after the timer ends IF the mouse is still moving. Obviously what I figured was, on mouse moving start a timer and display the element and if there is another mouse move after the first one stop the timer and start it again repeatedly therefore the timer never ends as long as the mouse is moving.
the problem is my element is blinking after the 1000 milliseconds is up flashing on/off as I move the mouse. I think I'm just tripping on the logic here, but I can't figure it out.
//Separate function to pass in utilBarTimer into the setTimeout
function timerFunction(utilBarTimer){
self.iframe.addEventListener('mousemove',function(){
clearTimeout(window.utilBarTimer);
});
utilBar.style.display = 'none';
}
self.iframe.addEventListener('mousemove',function(){
utilBar.style.display = 'block';
var utilBarTimer = window.setTimeout(function(){
timerFunction(utilBarTimer)
},1000);
});
They way you are currently doing it is creating a new EventListener that will clear the timeout every time the mouse moves. I think the logic you're looking for is this:
var utilBar = document.getElementById('utilBar'),
utilBarTimer;
window.addEventListener('mousemove', function() {
utilBar.style.display = 'block';
// if we have a timer already running, kill it out
if (utilBarTimer) {
clearTimeout(utilBarTimer);
}
// begin a new timer that hides our object after 1000 ms
utilBarTimer = window.setTimeout(function() {
utilBar.style.display = 'none';
}, 1000);
});
Here's the jsfiddle of it in action.
Related
this is probably a very basic question, but I am trying to animate an image (with a kind of pulse effect) when a button is hovered over.
So far I have this:
$("#austriaBtn").mouseenter(
function animate(){
$('#austria').animate({width:"35", top:"-=4", left:"-=4"},600);
$('#austria').animate({width:"27", top:"+=4", left:"+=4"},600, animate);
}
);
Now, I can hover over the button (austriaBtn) and the image (austria) starts to pulsate, however, when I take the mouse off, it carries on pulsating. How can I stop it?
I know it must be something to do with stop(), but whenever I try to put it in, the animation stops working all together.
Thanks in advance!
Put .stop() in a .mouseleave() function.
$("#austriaBtn").mouseleave(function(){ $('#austria').stop(true,true); });
The true arguments in .stop() are as follows:
clear animation queue (default is false; shouldn't be an issue.)
jump to end of animation (default is false; stops the element from being caught in the middle of an animation. important here.)
You have to use the corresponding mouseleave event, thus catching the event when the mouse leaves the button and then stop the animation.
$("#austriaBtn").mouseleave(
function() {
$("#austria").stop();
}
);
you could use a lock variable:
var stopAnimation = false;
$("#austriaBtn").mouseenter(
function animate(){
if(stopAnimation){
stopAnimation = false;
} else {
$('#austria').animate({width:"35", top:"-=4", left:"-=4"},600);
$('#austria').animate({width:"27", top:"+=4", left:"+=4"},600, animate);
}
}
);
$("#austriaBtn").mouseleave(
function(){
$('#austria').stop();
stopAnimation = true;
}
);
I am trying to create a front-end to a task management system, and I'm stuck on a setTimeout problem. I am trying to make it so that when a user clicks the checkbox, the tile fades to 33% opacity/toggle a "completed" class, waits 2 seconds, and then disappears; if the user clicks again on the checkbox before it disappears, the task should toggle the class and clear the timeout.
I am having a lot of trouble getting the clearTimeout command to work. I have declared my timer variable outside of the relevant blocks, tried adding the clearQueue() and stop() commands to my function, and triple-checked spelling.
My JS fiddle is here: http://jsfiddle.net/sLYA9/.
Here is my relevant JS:
$('#alltasks .taskitem form').click( function ( event ) {
event.preventDefault();
// Variables for different referenced elements
var tile = $( this ).parent('.taskitem');
var taskContents = '<div class=\'taskitem\' draggable=\'true\'>' + tile.html() + '</div>';
var timer;
// Unchecking a checked task
if (tile.hasClass('completed')) {
clearTimeout( timer );
tile.clearQueue().stop().fadeTo( 300, 1 );
} else { // Checking an unchecked task
tile.fadeTo( 300, 0.33 );
timer = setTimeout( function() {
alert("the task disappears");
}, 2000 );
}
tile.toggleClass('completed');
});
Again, I would like the user to be able to click the checkbox again before the 2000 ms timer is up and clear the timer.
Any ideas what I missed?
EDIT: I feel silly now. Moving my timer declaration outside of the click handler function made it work properly.
The scope of the timer is local so each time it is called you have a new scope.
The variable timer needs to be declared outside of the click function.
Your timer scoped in the first "click" function. If you move var timer outside of the click callback it works. You could just check when the timer fires to see if it is still "complete"
I'm making a calendar app using the jQuery plugin FullCalendar and I made a tab to the left of the calendar with the weeks from 1-6 on it. When the user drags their mouse over one of the weeks the calendar switches to the view of the respective view. This works but it can be annoying for the user if they do it accidentally. So, I want to add a delay to the function so that it will only happen if the user has their mouse on it for a few hundred milliseconds so it will happen less without the user wanting it to happen.
$('#week3').mouseover(function() {
$('#week3').css('color', 'white');
$('#week3').css('background-color', '#6B8BA9');
$('#week3').week3();
I want to add a short delay before $('#week3').css('color', 'white');
If I am understanding you correctly, then you will need a more complete solution like below
var mouse_monitor
$('#week3').mouseover(function() {
mouse_monitor = setTimeout(function(){
$('#week3').css('color', 'white');
$('#week3').css('background-color', '#6B8BA9');
$('#week3').week3();
}, 1500)
});
$('#week3').mouseout(function() { clearTimeout( mouse_monitor ); }
The var mouse_monitor is a global reference to your timeout function. The mouseout function is missing in other post, which assures that your mouseover function will not fire if the user moves the mouse off the hover target before the value of the setTimeout expires. Other examples will still invoke your mouseover function everytime, but with just an added delay, so they won't work for what I think you are trying to achieve.
Use a timeout :
$('#week3').on({
mouseenter: function() {
var that = this;
$(that).data('timer',
setTimeout(function() {
$(that).css('color', 'white');
},1000)
).css('background-color', '#6B8BA9').week3();
},
mouseleave: function() {
clearTimeout( $(this).data('timer') );
}
});
you are looking for setTimeout
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.
I have a div called "#top". I would like it to fade out when the mouse is idle for 3 seconds. When the mouse moves again, make it appear (fade, of course)
Does anyone know how to do this?
Thanks a lot.
Use setTimeout, saving the return value somewhere (to cancel it with clearTimeout when the mouse moves again):
var timer;
$(document).mousemove(function() {
if (timer) {
clearTimeout(timer);
timer = 0;
}
$('#top:visible').fadeIn();
timer = setTimeout(function() {
$('#top').fadeOut()
}, 3000)
})
You'll want this inside $(document).ready() or the like.