We Keep Coding

Jquery trigger div height change event (animate?)

I need to detect the total height of my div "collectionFilterPage" while the animate event is running. Is there any event to bind?
This is my ja code:
function showMoreItems() {
$("#collectionFilterPage").animate({
height: "+=720"
}, 1000, function() {
if ($("#collectionFilterPage").outerHeight() >= $(".lista").outerHeight())
unbindScrollEvent();
});
}
Basically I would want to fire the "unbindScrollEvent" when both div "collectionFilterPage" and "lista" have the same height.
thanks

You might want to switch to this $().aninate signature and use the step property which allows you to set a callback function that is called during each step of the animation.
function showMoreItems() {
function checkHeight() {
if ($("#collectionFilterPage").outerHeight() >= $(".lista").outerHeight())
unbindScrollEvent();
}
$("#collectionFilterPage").animate({
height: "+=720"
}, {
duration: 1000,
complete: checkHeight,
step: checkHeight
});
}
http://api.jquery.com/animate/
$(...).animate( properties, options );

Solved. It has been very easy
height: $("#collectionFilterPage").outerHeight() >=
$(".lista").outerHeight() ? "+=0" : "+=720"

How to prevent mouseenter event action with jQuery

I have this simple mouseenter : mouseleave action:
call = $('.js-call');
call.on({
mouseenter: function(e){
// animation
e.stopPropagation();
},
mouseleave: function(e){
// animation
}
});
In this action i have two CSS animations, which have a duration of 300ms. How can I prevent mouseover event for animation end, and fire it again if i'm properly on call element. When i moving fast on my call element action call many times. How to prevent it? Thx for help.

I would go with placing timeouts on both events, and activate the animation only if at the end of that timeout you still meet a condition. Something like that:
var timeoutIn, timeoutOut, delay = 300;
$element.hover(
function() {
if (timeoutOut){
clearTimeout(timeoutOut);
}
timeoutIn = setTimeout(function() {
// ##################
// 'MOUSEENTER' STUFF GOES HERE
// ##################
}, delay);
},
function() {
if (timeoutIn){
clearTimeout(timeoutIn);
}
timeoutOut = setTimeout(function() {
// ##################
// 'MOUSELEAVE' STUFF GOES HERE
// ##################
}, delay);
}
);
Update: I've just created a jQuery plugin called jQuery.hoverDelay.js, you can check it out here: jQuery hoverDelay.js

what you could do is use .bind( eventType [, eventData ], handler(eventObject) ).
bind the event mouseleave after you're done with the animation and vice versa. this should fix it.

Using jQuery .stop() is the correct approach.
Heres a working fiddle starting and stoping an animation with mouseenter and mousleave, without starting new animation if theres already running one.
http://jsfiddle.net/CZtLe/
function animateMe(element, color) {
element.stop(true).animate({
backgroundColor: color,
duration: 300
});
}
$(function () {
call = $('.js-call');
call.on({
mouseenter: function (e) {
animateMe($(this), '#FF0000');
e.stopPropagation();
},
mouseout: function (e) {
animateMe($(this), '#000000');
}
});
});

Automatically move div with javascript on delay

I have the below piece of code that moves a onto the screen when ?added is in the URL which works great. I now need to add a piece of code to it that then moves the back over after 5 seconds. I have noticed there's a delay function but I'm not sure how to add it into the code. Can anyone help? Many thanks!
$(document).ready(
function () {
if (document.URL.indexOf("?added") >= 0) {
$('#popout-left-menu-container')
.animate({
'right': '2px'
}, 300);
};
});

You can use the setTimeout function to delay something in javascript. Maybe like this:
$('#popout-left-menu-container').animate({'right':'2px'},300);
setTimeout(function(){
//This is animation that runs after 5 seconds. You can use it to move the block back.
//You have to set your parameters yourself here
$('#popout-left-menu-container').animate({'right':'0px'},300);
}, 5000);

$(document).ready(
function () {
if (document.URL.indexOf("?added") >= 0) {
setTimeout(function(){
$('#popout-left-menu-container')
.animate({
right:'2px'
},300);
},5000);
};
});

You should do it with .delay().
$("query").animate(firstAnimation, firstDuration).delay(milliseconds).animate(secondAnimation, secondDuration);

Have my function keep checking for it's condition

I have a jquery function that will animate the progress bar I have from 0 to 100 when it is on the screen. The problem is, if it is not visible (not visible on the page) on page load, it will never be triggered.
My code
<script>
$(function() {
$('.dial').knob({
min: '0',
max: '100',
readOnly: true,
displayInput: true
});
$(".dial:in-viewport").parent().show(0, function() {
$({ value: 0 }).animate(
{ value: 100 },
{ duration: 1000,
easing: 'swing',
progress: function() {
$('.dial').val(Math.round(this.value)).trigger('change');
}
});
});
});
</script>
My question is how do I make it so that function will constantly check to see if it is on the screen until it returns valid.

The easiest way would be to create an interval which executes the code every n milliseconds.
var interval = 400;
var timer = window.setInterval(function(){
// your code goes here ...
if (yourCodeHasBeenExecuted === true) {
window.clearInterval(timer);
}
}, interval);
I guess this will work, but it is not the most beautiful solution existing. A better way would be to use window resize or window scrolling events, depending of what you need, and execute your code there.
You find an example for a resize event here.

JS setTimeout & jQuery function

I have this function and I am wondering why the setTimeout is not working:
$(document).ready(function() {
$('.sliding .text').css("top","130px")
$('.sliding').mouseenter(function() {
mouseOverTimer = setTimeout(function() {
$(this).find('.text').animate({"top": "0"}, 200);
}, 500);
})
.mouseleave(function() {
$(this).find('.text').delay(500).animate({"top": "130px"}, 400);
});
});
I tried wrapping the mouseenter event in the timeout, but that didn't seem like a great idea. I just want the animation on mouseenter to only work after the mouse has been over it for at least half a second.
Alternatively, is there a better way of doing it in jQuery?

The this value inside your timeout handler will not be what you think it'll be. Add an explicit variable:
$('.sliding').mouseenter(function() {
var self = this;
mouseOverTimer = setTimeout(function() {
$(self).find('.text').animate({"top": "0"}, 200);
}, 500);
})
Also you should declare "mouseOverTimer" as a local variable outside the handler setup code (that is, as a local variable of the "ready" handler) and then cancel the timeout in the "mouseleave" handler:
var mouseOverTimer = null;
$('.sliding').mouseenter(function() {
var self = this;
mouseOverTimer = setTimeout(function() {
$(self).find('.text').animate({"top": "0"}, 200);
}, 500);
})
.mouseleave(function() {
$(this).find('.text').delay(500).animate({"top": "130px"}, 400);
cancelTimeout(mouseOverTimer);
});
As I look at this, I'm pretty sure that the "mouseleave" code isn't really what you want; specifically I think the delay is probably unnecessary. I'm not 100% sure about what you want things to look like, however.

I would perhaps simplify the problem this way: On mouseover I would instantiate a new Date(), getTime() on it and stash it into a var. Then on mouseleave you take another date, grabbing the timestamp again. In that same mouseleave, do an evaluation: if the difference between date 1 and date 2 is greater than 1/2 second, you fire your action. Else, you reset date 1.

you could try this instead of using setTimeout:
$(document).ready(function() {
$('.sliding .text').css("top","130px")
$('.sliding').mouseenter(function() {
$(this).find('.text').stop().delay(500).animate({"top": "0"}, 200);
})
.mouseleave(function() {
$(this).find('.text').stop().animate({"top": "130px"}, 400);
});
});
This will delay the mouseover animation by 500ms. If you mouse out, it calls stop(), which would kill the pending animation and then animate back to the starting position. If it never moved, the mouseout animation will also not happen (correctly - it has nowhere to go).

Another way to do this
mouseIn = false;
$(document).ready(function() {
$('.sliding .text').css("top","130px")
$('.sliding').mouseenter(function() {
mouseIn = true;
mouseOverTimer = setTimeout(function() {
if(mouseIn==true)
$(this).find('.text').animate({"top": "0"}, 200);
}, 500);
})
.mouseleave(function() {
mouseIn=false;
$(this).find('.text').delay(500).animate({"top": "130px"}, 400);
});
});