after some tries to get this to work, i ask you, if you know where my mistake is.
This is my code until now:
$(".menu a").hover( function () {
$(this).data('timeout', setTimeout( function () {
$(this).hover(function() {
$(this).next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
i would be happy about some help.
I tried this but it doesn't work. one more information perhaps it will make it more clear. i had the function like this before:
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
it worked but so it will be viewed imidiately. so i found this to set a timer that it show the popup only after in this example one second:
$("#hello").hover( function () {
$(this).data('timeout', setTimeout( function () {
alert('You have been hovering this element for 1000ms');
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
both worked it self but if i put them together it does nothing
Inside the setTimeout callback, this does not refer to the hovered element.
To fix this, you need to make a separate variable in the event handler, like this: (pun intended)
$(".menu a").hover( function () {
var me = $(this);
me.data('timeout', setTimeout( function () {
me.hover(function() {
me.next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
me.next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
You don't need to use me inside the inner hover handlers, but you might as well.
Theres a nice plugin that does this: hoverIntent. Replace .hover with .hoverIntent, and you wont have to deal with setting and clearing the timeout manually.
Related
I have the following JQuery which works on initial page load:
$(window).on('load', function(){
$('.details').hover(function() {
$(this).find('.description').stop().animate({
height: "toggle",
opacity: "toggle"
}, 200);
});
});
Now that I have added pagination and filters to the page, the window onload obviously won't work once any pagination or filters have been triggered. I understand that I need to create an additional function to ensure the above will still work, however I believe that there is something not write with my code, as when pagination is used, I am still getting no jquery. I am using the correct approach?
This is what I have so far:
document.onreadystatechange = function(){
if (document.readyState === "complete") {
$('.details').hover(function() {
$(this).find('.description').stop().animate({
height: "toggle",
opacity: "toggle"
}, 200);
});
}
else {
window.onload = function () {
$('.details').hover(function() {
$(this).find('.description').stop().animate({
height: "toggle",
opacity: "toggle"
}, 200);
});
};
};
}
I am still learning.
Created a function (partA), and then triggered function when required (partB)
// PART A
function cardFunction(){
$('.details').hover(function() {
$(this).find('.description').stop().animate({
height: "toggle",
opacity: "toggle"
}, 300);
});
}
// PART B
jQuery(document).ready(function () {
cardFunction();
});
I want the second click function to be delayed by 500ms, where do I insert this?
$(document).ready(function(){
$('.dropToggler').click(function() {
$(this).parent().addClass("open");
});
$('.acceptCta').click(function() { //I want the delay on this function.
$(this).parent().removeClass("open");
});
});
Tried this too, didn't work:
$(document).ready(function() {
$('.dropToggler').click(function() {
$(this).parent().addClass("open");
});
setTimeout(function() {
$('.acceptCta').click(function() {
$(this).parent().removeClass("open");
});
}, 800);
});
You need to delegate and tell which element you are referring to when clicking and use that for setTimeout - removeClass function
var $this = $(this) // will be click function
setTimeout(function() {} does not know what is $(this) as we searching for the parents of the clicked event element.
$(document).ready(function() {
$('.dropToggler').click(function() {
$(this).parent().addClass("open");
});
$('.acceptCta').click(function() {
//This needed
var $this = $(this)
//delay removeClass
setTimeout(function() {
$this.parent().removeClass("open");
}, 800);
});
});
setTimeout(function(){
//your code goes here
alert("Hello");
}, 3000);//here you can set the time in milliseconds
you can use the setTimeout Function
I need to be able to troggle my sidebar.
This works but I also need to hide the sidebar when reach viewport > 740px.
The troggle needs to work also. I came a far way but I think I have to combine these two to let it work properly.
Anyone knows hot to do this?
CHECK OUT MY FIDDLE PLEASE >
My script:
$('.troggler').toggle(
function() {
$('.right').animate({"right": "-400px"}, "slow");
$('.troggler').animate({"background-position": "-25px"}, "fast");
}, function() {
$('.right').animate({"right": "0"}, "slow");
$('.troggler').animate({"background-position": "0"}, "fast");
})
$(window).resize(function() {
if ($(window).width() < 740) {
$(".right").animate({"right": "-400px"}, "slow");
$('.troggler').animate({"background-position": "-25px"}, "fast");
}
else {
$('.right').animate({"right": "0"}, "slow");
$('.troggler').animate({"background-position": "0"}, "fast");
}
});
I guess the $(window).resize() fires multiple events while you ara resizing the window.
To solve this, you might wait for the resizing (dragging) complete.
// Basic Concept is ...
$(window).resize(function () {
if( ... event not fired ... ){
setTimeout(function(){
// toggle your navi
},500);
}
....
});
DEMO:http://jsfiddle.net/VseLR/13/
Your code could go like this:
function showNavi(){
$('.right').animate({"right": "0"}, "slow");
$('.troggler').animate({"background-position": "0"}, "fast");
}
function hideNavi(){
$('.right').animate({"right": "-400px"}, "slow");
$('.troggler').animate({"background-position": "-25px"}, "fast");
}
$('.troggler').toggle(function() {
showNavi();},
function() {
hideNavi();
});
function applyLayout() {
if ($(window).width() < 740) {
hideNavi();
}else {
showNavi();
}
}
var timer = 0;
var delayToCall = (function () {
return function (callback, ms) {
if (timer > 0) {
clearTimeout (timer);
}
timer = setTimeout(callback, ms);
};
})();
$(window).resize(function () {
delayToCall(function(){
applyLayout();
}, 500);
});
You might want to check this question:
JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?
Hope this helps.
I have some DIVs for products, and I have:
// mouseenter
$(document).on('mouseenter', '.productWrapper', function(){
$(this).stop(true,true);
$(this).find('.productWrapperContentVisible').animate({
height: '100px',
opacity: '1',
}, function(){
$(this).find('.productWrapperPrice').fadeIn();
$(this).find('.productWrapperByCompany').fadeIn();
});
});
// mouseleave
$(document).on('mouseleave', '.productWrapper', function(){
$(this).stop(true,true);
$(this).find('.productWrapperPrice').fadeOut('fast');
$(this).find('.productWrapperByCompany').fadeOut('fast');
$(this).find('.productWrapperContentVisible').animate({
height: '40px',
opacity: '.8',
});
});
and there are about 20 of products in each page, while I'm using stop(true,true), after I move my mouse on many of them many times, this doesn't work right, they continue to change height, and sometimes productWrapperPrice is still there while I don't have my mouse over there, it should go hidden.. .
sample: http://jsfiddle.net/gwsPB/
What's wrong with my code?
Thanks
Try this:
// mouseenter
$(document).on('mouseenter', '.productWrapper', function () {
$(this).find('.productWrapperContentVisible').stop(true, false).animate({
height: '100px',
opacity: '1'
}, function () {
$(this).find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeIn();
});
}).on('mouseleave', '.productWrapper', function () {
var $this = $(this);
$this.find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeOut('fast');
$this.find('.productWrapperContentVisible').stop(true, false).animate({
height: '40px',
opacity: '.8'
});
});
DEMO
The problem is: when you mouseenter and mouseleave immediately fast enough, your animate function in the mouseenter event is not finished yet. When your call $this.find('.productWrapperContentVisible').stop(true, true), the animation is stopped but the callback function is called which display them again
function () {
$(this).find('.productWrapperPrice, .productWrapperByCompany')
.stop(true, true).fadeIn();
}
By using stop(true, false), the callbacks are not called.
You need to call stop() on elements where are being animated, calling it on an ancestor element has no effect.
// mouseenter
$(document).on('mouseenter', '.productWrapper', function () {
$(this).find('.productWrapperContentVisible').stop(true, true).animate({
height: '100px',
opacity: '1'
}, function () {
$(this).find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeIn();
});
}).on('mouseleave', '.productWrapper', function () {
var $this = $(this);
$this.find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeOut('fast');
$this.find('.productWrapperContentVisible').stop(true, true).animate({
height: '40px',
opacity: '.8'
});
});
I'm trying to create two "buttons" that using the hover event, hide some divs and then display some others in their place. I'm then trying to delay the swapping back to the default div.
All works, fine, unless you go from one button to the other at which point you get many divs displaying at the same time until the delay passes. If we don't use the delay it works perfectly.
The javascript:
jQuery(function ($) {
$('#servers-btn').hover(
function() {
$('#servers, #servers-heading, #servers-arrow').show(0);
$('#default, #default-heading').hide(0);
},
function() {
setTimeout( function() {
$('#servers, #servers-heading, #servers-arrow').hide(0);
$('#default, #default-heading').show(0);
},1000)
}
);
$('#hosting-btn').hover(
function() {
$('#hosting, #hosting-heading, #hosting-arrow').show(0);
$('#default, #default-heading').hide(0);
},
function() {
setTimeout( function() {
$('#hosting, #hosting-heading, #hosting-arrow').hide(0);
$('#default, #default-heading').show(0);
},1000)
}
);
});
I assume i need to make one hover function aware of the other so it can cancel the timeout, i just have no clue how to do it.
EDIT - just tidyed up code to put all divs into one hide/show.
Also, i should have probably mentioned that the #default, #servers and #hosting divs appear in exactly the same location. So need to instantly switch at the same time (which the above does).
EDIT - latest attempt to use clearTimeout here http://jsfiddle.net/KH4tt/1/ - but can't quite make it work right.
You can use the .delay() function in jquery (I'm using Jquery 1.7.1 version) like the below example:
$(selector).delay(1000).hide("slow");
Try something like this
$('#servers-btn').hover(
function() {
$('#servers, #servers-heading, #servers-arrow').show(0);
$('#default, #default-heading').hide(1000, function() {
$('#servers, #servers-heading, #servers-arrow').hide(0);
$('#default, #default-heading').show(0);
});
}
);
Ok here's the final thing using the clearTimeout() function to cancel the setTimeout() that is used on mouseleave (hover handlerOut) that creates the delay:
jQuery(function($) {
var timeoutserver;
function canceltimeout() {
if (timeoutserver) {
window.clearTimeout(timeoutserver);
timeoutserver = null;
}
}
function closeServertime() {
timeoutserver = window.setTimeout(function() {
$('#servers, #servers-heading, #servers-arrow').hide(0);
$('#default, #default-heading').show(0);
}, 1000);
}
function closeHostingtime() {
timeoutserver = window.setTimeout(function() {
$('#hosting, #hosting-heading, #hosting-arrow').hide(0);
$('#default, #default-heading').show(0);
}, 1000);
}
$('#servers-btn').hover(
function() {
canceltimeout();
$('#servers, #servers-heading, #servers-arrow, ').show(0);
$('#default, #default-heading, #hosting, #hosting-heading, #hosting-arrow').hide(0);
}, function() {
closeServertime();
});
$('#hosting-btn').hover(
function() {
canceltimeout();
$('#hosting, #hosting-heading, #hosting-arrow').show(0);
$('#default, #default-heading, #servers, #servers-heading, #servers-arrow').hide(0);
}, function() {
closeHostingtime();
});
});