Develop Reference

Change window onload to work after pagination

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();
});

Jquery on click show mouseleave hide sidebar

Hi i need some with the this script i manage to show the panel with the mouseclick but i wanted when my mouse leave the panel it will close it
this is the sample http://jsfiddle.net/jikey/w9s7pt25/
$(function(){
$('.slider-arrow').click(function(){
if($(this).hasClass('show'))
{
$( ".slider-arrow, .spanel" ).animate({
right: "+=182"
}, 700, function() {
// Animation complete.
});
$(this).html('<img src="images/sideclose.png" />').removeClass('show').addClass('hide');
}
else
{
$( ".slider-arrow, .spanel" ).animate({
right: "-=182"
}, 700, function() {
// Animation complete.
});
$(this).html('<img src="images/sideopen.png" />').removeClass('hide').addClass('show');
}
});
});

Here you need to write 2 methods.
jQuery click to display the section on clicking on the arrow and jQuery onmouseleave to hide the section on coming out of the section.
I suggest you to display the slideopen.png and slideclose.png files in the (background style) CSS with respect to the classes.
Method 1: on click
jQuery Code:
$('.slider-arrow').on("click", function(){
if($(this).hasClass('show')){
$( ".slider-arrow, .panel" ).animate({
right: "+=300"
}, 700, function() {
// Animation complete.
}); $(this).html('«').removeClass('show').addClass('hide');
}
});
Method 2: on mouse leave
jQuery Code:
$(".panel").on("mouseleave", function(){
if(!$('.slider-arrow.show').hasClass('show')) {
$( ".slider-arrow, .panel" ).animate({
right: "-=300"
}, 700, function() {
// Animation complete.
});
$(".slider-arrow").removeClass('hide').addClass('show');
}
});
Demo link: http://jsfiddle.net/w9s7pt25/7/

What you can do is add a seperate mouseout function as illustrated in this jsfiddle. The problem with your code was that the mouseover event only acts on .slider-arrow once, changes the class to hide and then expects another mouseover to read that it needs to be hidden.
$(function () {
$('.slider-arrow').mouseover(function () {
if ($(this).hasClass('show')) {
$(".slider-arrow, .panel").animate({
right: "+=300"
}, 700, function () {
// Animation complete.
});
$(this).html('«').removeClass('show').addClass('hide');
}
});
$('.panel').mouseout(function () {
if ($('.slider-arrow').hasClass('hide')) {
$(".slider-arrow, .panel").animate({
right: "-=300"
}, 700, function () {
// Animation complete.
});
$('.slider-arrow').html('»').removeClass('hide').addClass('show');
}
});
});
Hope it makes sense.

You can use mouseout or mouseleave. I guess you would add some elements in panel. So mouseout fires when the pointer moves out of child element as well, while mouseleave fires only when the pointer moves out of the bound element
$('.panel').mouseleave(function() {
if($('.slider-arrow').hasClass('hide')){
$( ".slider-arrow, .panel" ).animate({
right: "-=300"
}, 700);
$('.slider-arrow').html('&raquo').removeClass('hide').addClass('show');
}
});

You can attach the jquery .mouseleave() function on the panel and let it execute only when the panel is visible also add a class like 'visible' to keep state of the visibility of your panel like so: http://jsfiddle.net/gakuru/d2qnrm2x/
$('.panel').on('mouseleave',function(){
if($(this).hasClass('visible')){
$( ".slider-arrow, .panel" ).animate({
right: "-=300"
}, 700, function() {
// Animation complete.
});
$('.slider-arrow').html('»').removeClass('hide').addClass('show');
$('.panel').removeClass('visible');
}
});

jquery stop() doesn't work properly

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'
});
});

Jquery finish on mouseout multiple events

Okay so I am trying to make multiple animations happen, onmouseenter i have a bounce effect that uses finish(); on mouseout and onclick moves position problem is, if you click and and then move your mouse out of the div it finishes the click animation, i have tried using variables, .data and other various methods but have failed miserably and am looking for a quick solution.
Here is the jsfiddle: http://jsfiddle.net/FR5Lu/
Here is the code
$.fx.speeds._default = 1000;
$.fn.StartBounce = function() {
var self = this;
(function runEffect() {
self.effect('bounce', {distance:20}, 5000, runEffect);
}) ();
return this;
};
$('.iconeffect').mouseenter(function() {
if (!$(this).is(":animated") ) {
$(this).stop().StartBounce();
}
});
$('.iconeffect').mouseout(function() {
$(this).finish();
})
$('#effect1').click(function() {
if( $("#desc1").is(":hidden") ) {
bounced = false;
$(this).finish();
$(this).stop(true, true).animate({ left: -50});
$('#effect2, #effect3').stop(true, true).animate({ left: 1000});
$('#desc1').show( "blind", 1000);
} else {
$(this).finish();
$(this).stop(true, true).animate({ left: 0});
$('#effect2, #effect3').stop(true, true).animate({ left: 0});
$('#desc1').hide( "blind", 1000);
}
});

You can use a custom queue for your onclick animation so that it's not affected by the call to finish() on mouseout, also finish() is essentially the same as stop(true,true); so you don't need both in your click funciton:
$('#effect1').click(function() {
if( $("#desc1").is(":hidden") ) {
$(this).finish().animate({ left: -50},{queue:'show'}).dequeue('show');
$('#effect2, #effect3').stop(true, true).animate({ left: 1000});
$('#desc1').show( "blind", 1000);
} else {
$(this).finish().animate({ left: 0},{queue:'show'}).dequeue('show');
$('#effect2, #effect3').stop(true, true).animate({ left: 0});
$('#desc1').hide( "blind", 1000);
}
});
Here's the updated fiddle
Note that when you use a custom queue you need to explicitly call dequeue() to start the animation

How to make a hover listener optional

I've been having some difficulties, could someone point me in the right direction for this fiddle?
I need the div to animate on hover, but only when the .isDown class has been added to a different element by the click function.
Fiddle
$(".move").click( function(event){
event.preventDefault();
if ($(this).hasClass("isDown") ) {
$(this).stop().animate({opacity:"0.5"}, 270);
$(this).removeClass("isDown");
//can put hover in here????
} else {
$(this).stop().animate({opacity:"1"}, 300);
$(this).addClass("isDown");
}
return false;
});
if ($(".move").hasClass("isDown")){
$(".funnyMOVE").hover(
function() {
$(this).stop().animate({top:"10px"},215);
},
function() {
$(this).stop().animate({top:"0px"},230);
});
}

Use the same condition inside the hover function. You are only binding the event in DOM ready based on the condition. So the event is never bound as the condition is false to start with.
$(".fuckerMOVE").hover(
function () {
if ($(".move").hasClass("isDown")) {
$(this).stop().animate({
top: "10px"
}, 215);
}
},
function () {
if ($(".move").hasClass("isDown")) {
$(this).stop().animate({
top: "0px"
}, 230);
}
});
Check Fiddle

Here is working code:
I removed your code outside of the .move click and put this in it:
$(".fuckerMOVE").hover(function () {
$(this).stop().animate({
top: "10px"
}, 215);
},
function () {
$(this).stop().animate({
top: "0px"
}, 230);
});
Fiddle
The problem was that if ($(".move").hasClass("isDown")){ was reached on document load, where this would have been false. My solution was just to apply the hover bind on the element directly when you are wanting it to be bound.
I actually just realized it looks like you were wanting to remove the bind if the .move is clicked again. If this is the case, you can move your bind into your else block and then add this to the if block:
$(".fuckerMOVE").off("mouseenter mouseleave");
The reason for mouseenter and mouseleave is that behind the scenes hover() sets listeners for these events.
Fiddle

not sure if this is what you want.
http://jsfiddle.net/hvLA6/
$("#move").click( function(event){
event.preventDefault();
if ($(this).hasClass("isDown") ){
$(this).stop().animate({opacity:"0.5"}, 270);
$(this).removeClass("isDown");
} else {
$(this).stop().animate({opacity:"1"}, 300);
$(this).addClass("isDown");
}
if ($("#move").hasClass("isDown")){
$(".fuckerMOVE").hover(
function() {
$(this).stop().animate({top:"10px"},215);
},
function() {
$(this).stop().animate({top:"0px"},230);
});
}
return false;
});
CSS
div {
width:100%;
height:100px;
background:black;
position:relative;
}
#move {
font-size:20px;
background:pink;
}