I'm new to Prototype JS (and javascript in general), and I'm trying to make an overlay appear after the user has hovered over an element on the page for half a second. Currently, I'm accomplishing this with:
$$("a.tag").invoke('observe', 'mouseover', function() {
//my code here
});
This code makes the overlay appear when the trigger element is moused over, but how do I add the half second pause?
Do this:
var timerId;
$$("a.tag").invoke('observe', 'mouseover', function() {
timerId = setTimeout(function() {
// code here
}, 500);
});
$$("a.tag").invoke('observe', 'mouseout', function() {
if (timerId) {
cancelTimeout(timerId)
timerId = null;
}
});
I Think you could add a class waitingEndDelay to your element.
Then code your "show function" in order to be executed only if element has no waitingEndDelay class. At the end of the delay remove waitingEndDelay.
Related
I'm practically useless at JavaScript so I need your help to add a "pause on mouse hover" feature to this slideshow.
$( function() {
$( '#cbp-fwslider' ).cbpFWSlider();
} );
setInterval(function() {
if(jQuery('.cbp-fwnext').css('display') != 'none'){
jQuery('.cbp-fwnext').click();
}
else {
jQuery('.cbp-fwdots span:first-child').click();
}
}, 3000);
I found this slideshow here and I added the bottom bit (copied it from another user) to allow it to auto scroll but I have no idea on how to make it pause on mouse hover.
Please help anyone.
If I understand your code correctly, you are using setInterval() to simulate a click on the next button every 3 seconds. So you can add a pause by having some code process the mouseenter and mouseleave events and set a isPaused variable that your existing code would then test before doing the click(). Assuming you want the hover functionality to be over the #cbp-fwslider element:
$( function() {
var isPaused = false;
$( '#cbp-fwslider' ).cbpFWSlider()
.on({
mouseenter: function() { isPaused = true; },
mouseleave: function() { isPaused = false; }
});
setInterval(function() {
if (isPaused) return; // do nothing when paused
if(jQuery('.cbp-fwnext').css('display') != 'none')
jQuery('.cbp-fwnext').click();
else
jQuery('.cbp-fwdots span:first-child').click();
}, 3000);
});
Note that I've moved your setInterval() code inside the document ready handler so that isPaused can be a local variable within the ready handler rather than a global.
(Simple demo of the pause-on-hover functionality without the slideshow: http://jsfiddle.net/1gf8z8yd/1/)
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'm am attempting to build a homepage that has animations. I am having hard time controlling my animations though. All I need is to hide elements, and then show elements after a certain time. Loop through that sequence, and pause and show all elements when the someone hovers over the box. Example simple animation.
I have a long way to go. At first I tried using the .css() visibility property, now I'm using .show() and .hide().
I need a way to loop through my animations. I attempt to add another
setTimeout(clear1(), 3000);
to the end of my box1 function, but that wouldn't work for some reason.
I need a way to on a user hover over #box1, that all animations stop. I have tried using .clearQueue, but I couldn't get that to work.
First of all, set to your css:
.box {display: none;}
SHOW ALL BOXES ON HOVER See Demo
This will show all boxes on hover and then continue the animation from where it stopped (will hide the boxes that hadn't shown up during the animation). I think that is what you are after.
var index = 0; // To keep track of the last div showed during animation
var time_of_delay = 1000; // Set the time of delay
// Start the animation
$(document).ready(function () {
box1(time_of_delay);
});
// The hover states
$("#box1_1").hover(
function() {
box1(0);
}, function() {
box1(time_of_delay);
});
// The animation function
function box1 (delay_time) {
var time=delay_time;
if(time>0) {
$(".box").slice(index).each(function() {
$(this).hide().delay(time).show(0);
time=time+time_of_delay;
});
index=0;
} else {
$(".box:visible").each(function() {
index++;
});
$(".box").stop(true).show(0);
}
}
PAUSE ON HOVER See Demo
This will only pause the animation and continue from where it stopped.
var time_of_delay = 1000; // Set the time of delay
// Start the animation
$(document).ready(function () {
box1(time_of_delay);
});
// The hover states
$("#box1_1").hover(
function() {
box1(0);
}, function() {
box1(time_of_delay);
});
// The animation function
function box1 (delay_time) {
var time=delay_time;
if(time>0) {
$(".box:hidden").each(function() {
$(this).delay(time).show(0);
time=time+time_of_delay;
});
} else {
$(".box").stop(true);
}
}
I used setTimeout and clearTimeout and periodically call a function that increments (and resets) the box to display. Since I assign setTimout to boxt, I am able to call clearTimeout(boxt) on box1's hover event so that I can stop specifically that loop. Here's my jsfiddle. It might not be the exact effect you're trying to achieve, but it should be the right functionality and be easily adaptable with a few tweaks. Let me know if this works for you and if you have any questions about how it works :)
LIVE DEMO
var $box = $('#box1').find('.box'),
boxN = $box.length,
c = 0,
intv;
$box.eq(c).show(); // Show initially the '0' indexed .box (first one)
function loop(){
intv = setInterval(function(){
$box.eq(++c%boxN).fadeTo(400,1).siblings().fadeTo(400,0);
},1000);
}
loop(); // Start your loop
$('#box1').on('mouseenter mouseleave', function( e ){
return e.type=='mouseenter' ? (clearInterval(intv))($box.fadeTo(400,1)) : loop();
});
Where ++c%boxN will take care to loop your animation using the Modulo % (reminder) operator inside a setInterval. Than all you need to do is to register a mouseenter and mouseleave on the parent element to:
clear the Interval on mouseenter + fade all your elements
restart your loop function on mouseleave.
Here's one way to do it:
// hide all of the boxes
$('.box').hide();
// reference to each box, the current box in this list and a flag to stop the animation
var divs = box1.getElementsByClassName('box');
var i = 0;
var run = true;
// this will animate each box one after the other
function fade(){
if(i < divs.length && run){
$(divs[i++]).fadeIn(500, function(){
setTimeout(fade, 1000);
});
}
};
fade();
// stop the above function from running when the mouse enters `box1`
$('#box1').on('mouseenter', function(){console.log('enter');
run = false;
});
// start the function again from where we stopped it when the mouse leaves `box1`
$('#box1').on('mouseleave', function(){console.log('leave');
run = true;
fade();
});
Demo: http://jsfiddle.net/louisbros/dKcn5/
I am working on a nested menu, and when my mouse move over a option, a sublist will show up.
Here is my hover function:
$( ".sublist" ).parent().hover( function () {
$(this).toggleClass("li_hover",300); //use to change the background color
$(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
});
Now, I want add a short period before the sublist shows up to prevent the crazy mouse moving from user. Does somebody have a good suggestion on this?
Update:
Thanks for you guys, I did a little bit change on my program, recently it looks like this:
function doSomething_hover (ele) {
ele.toggleClass("li_hover",300);
ele.find(".sublist").toggle("slide", {}, 500);
}
$(function () {
$( ".sublist" ).parent().hover( function () {
setTimeout(doSomething_hover($(this)), 3000);
});
}):
This is weird that setTimeout will not delay anything. but if I change the function call to doSomething_hover (without "()"), the function will delay good. but i can not pass any jquery element to the function, so it still not works, could somebody tell me that how to make doSomething_hover($(this)) work in setTimeout ?
Update 2:
Got the setTimeout work, but it seems not what I want:
What I exactly want is nothing will happen, if the mouse hover on a option less than 0.5sec.
Anyway, here is the code I make setTimeout work:
function doSomething_hover (ele) {
ele.toggleClass("li_hover",300);
ele.find(".sublist").toggle("slide", {}, 500);
}
$(function () {
$( ".sublist" ).parent().hover( function () {
var e = $(this);
setTimeout(function () { doSomething_hover(e); }, 1000);
});
}):
Final Update:
I got this work by using clearTimeout when I move the mouse out.
so the code should be:
$( ".sublist" ).parent().mouseover( function () {
var e = $(this);
this.timer = setTimeout(function () { doSomething_hover(e); }, 500);
});
$( ".sublist" ).parent().mouseout ( function () {
if(this.timer){
clearTimeout(this.timer);
}
if($(this).hasClass("li_hover")){
$(this).toggleClass("li_hover");
}
$(this).find(".sublist").hide("slide", {}, 500);
});
This is the part in the $(document).ready(). Other code will be same as above.
真. Final Update:
So, mouseover and mouseout will lead to a bug sometime, since when I move the mouse to the sublist, the parents' mouseover event will be fire, and hide the sublist.
Problem could be solved by using hover function:
$( ".sublist" ).parent().hover(
function () {
var e = $(this);
this.timer = setTimeout(function () { doSomething_hover(e); }, 500);
},
function () {
if(this.timer){
clearTimeout(this.timer);
}
$(this).find(".sublist").hide("slide", {}, 500);
if($(this).hasClass("li_hover")){
$(this).toggleClass("li_hover",300);
}
}
);
Thanks all
Try this please:
Code
setInterval(doSomthing_hover, 1000);
function doSomthing_hover() {
$(".sublist").parent().hover(function() {
$(this).toggleClass("li_hover", 300); //use to change the background color
$(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
});
}
SetTime vs setInterval
At a fundamental level it's important to understand how JavaScript timers work. Often times they behave unintuitively because of the single thread which they are in. Let's start by examining the three functions to which we have access that can construct and manipulate timers.
var id = setTimeout(fn, delay); - Initiates a single timer which will call the specified function after the delay. The function returns a unique ID with which the timer can be canceled at a later time.
var id = setInterval(fn, delay); - Similar to setTimeout but continually calls the function (with a delay every time) until it is canceled.
clearInterval(id);, clearTimeout(id); - Accepts a timer ID (returned by either of the aforementioned functions) and stops the timer callback from occurring.
In order to understand how the timers work internally there's one important concept that needs to be explored: timer delay is not guaranteed. Since all JavaScript in a browser executes on a single thread asynchronous events (such as mouse clicks and timers) are only run when there's been an opening in the execution.
Further read this: http://ejohn.org/blog/how-javascript-timers-work/
timeout = setTimeout('timeout_trigger()', 3000);
clearTimeout(timeout);
jQuery(document).ready(function () {
//hide a div after 3 seconds
setTimeout( "jQuery('#div').hide();",3000 );
});
refer link
function hover () {
$( ".sublist" ).parent().hover( function () {
$(this).toggleClass("li_hover",300); //use to change the background color
$(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
});
}
setTimeout( hover,3000 );
....
You could use .setTimeout
$(".sublist").parent().hover(function() {
setTimeout(function() {
$(this).toggleClass("li_hover", 300); //use to change the background color
$(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
}, 1000);
});
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);