Develop Reference

give element class when scrolling

I would like to give an element a .class when user scrolls a page. And then take it away (.class) when user stops scrolling.
Simply speaking, I want to give font awesome icon class fa-spin only when page is being scrolled, and when scrolling stops, icon stops spinning.
Would be nice to know how to just generally apply css animation when scrolling.
Thanks

You can use https://github.com/ssorallen/jquery-scrollstop
var $el = $('.element');
$(window).on("scrollstart", function() {
$el.addClass('scrolling')
})
$(window).on("scrollstop", function() {
$el.removeClass('scrolling')
})

You can use addClass and removeClass on scroll event as follow.
This will add class when scrolling and remove it after delay of 100 milliseconds.
$(window).scroll(function() {
$('div').addClass('myClass');
setTimeout(function() {
$('div').removeClass('myClass');
}, 100);
});
DEMO

You can use like this:
$(window).scroll(function() {
$('div').addClass('blue');//add class on scroll
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
$('div').removeClass('blue');//remove class on scrolling stops
}, 250));
});
demo

To add e.g. fadeIn animation on scroll you can do as following:
$(window).scroll(function () {
$('#second').delay(1000).fadeIn('slow');
(delay is optional)
Check example: jsfiddle.net

How do I properly delay jQuery animations when loading a remote HTML?

EDIT: This software package is the full and undoctored version of what I'm trying to fix here. The problem is in the /data/renderpage.js script. Feel free to examine this before continuing.
https://github.com/Tricorne-Games/HyperBook
I really appreciate all the help guys!
=
I am polishing a jQuery script to do the following in a rigid sequence...
Fade out the text.
Shrink the size of the container div.
Preload the remote HTML ///without showing it yet!///
Open the size of the container div.
Fade in the new remote HTML.
I do not mind if steps 1 and 2, 4 and 5 are combined to be one whole step (fade/resize at the same time). It's when the new HTML is loaded it interrupts the entire animation, even from the beginning.
The idea is that I do not want my remote HTML to show until after the animation renders right. I want the original text to fade out and the container div close up, then, behind the scenes, ready the text of the new HTML, and then have the container div open up and fade the new text in.
It seems when I call the load(url) function, it instantaneously loads the page up, and the animations are still running (like the new HTML ends up fading out, only to fade back in, and not the original text out and then the new one in). Either that, or the whole function is calling each line at the same time, and it's disrupting the page-changing effect I want.
Here's my current script setup...
$(document).ready(function() {
// Start-Up Page Load (Cover, ToC, etc.)
$('#content').load('pages/page1.htm');
// Navigating Pages
$(document).on('click', 'a', function(e) {
e.preventDefault();
var ahref = $(this).attr('href');
$('#content_container').animate({height: 'hide'}, 500);
$('#content').fadeTo('slow', 0.25);
$('#content').load(ahref);
$('#content').css({opacity: 0.0});
$('#content').fadeTo('slow', 1.0);
$('#content_container').animate({height: 'show'}, 500);
return false;
});
});
What is it wrong I'm doing here? I have used the delay() function on every one of those steps and it doesn't solve the problem of holding back the new text.

jQuery objects can provide a promise for their animation queues by calling .promise on the jQuery element.
You can wait on one or more of these to complete using $.when() and then perform other operations.
The following does a fade out and slide up in parallel with the load, then (only when the animations complete), slides it down then fades it in (in sequence):
$(document).on('click', 'a', function (e) {
e.preventDefault();
var ahref = $(this).attr('href')
var $container = $('#content_container');
var $content = $('#content');
// Slide up and fadeout at the same time
$container.animate({
height: 'hide'
}, 500);
$content.fadeOut();
// Load the content while fading out
$('#content').load(ahref, function () {
// Wait for the fade and slide to complete
$.when($container.promise(), $content.promise()).then(function () {
// Slide down and fadein (in sequence)
$container.animate({
height: 'show'
}, 500, function () {
$content.fadeTo('slow', 1.0);
});
});
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/pffm1tnb/3/
The only issue with this version is that the load may complete faster than the fadeout/slideup and show the new data too early. In this case you want to not use load, but use get (so you have control over when to insert the new content):
// Load the content while fading out
$.get(ahref, function (data) {
// Wait for the fade and slide to complete
$.when($container.promise(), $content.promise()).then(function () {
$content.html(data);
// Slide down and fadein (in sequence)
$container.animate({
height: 'show'
}, 500, function () {
$content.fadeTo('slow', 1.0);
});
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/pffm1tnb/4/
Notes:
return false from a click handler does the same as e.stopPropagation() and e.preventDefault(), so you usually only need one or the other.
I started with the JSFiddle from #Pete as no other sample was handy. Thanks Pete.
Update:
Based on the full code now posted, you are returning full pages (including header and body tags). If you change your code to .load(ahref + " #content" ) it will extract only the part you want. This conflicts with the second (better) example I provided which would need the pages returned to be partial pages (or extract the required part only).
Additional Update:
As $.get also returns a jQuery promise, you can simplify it further to:
$.when($.get(ahref), $container.promise(), $content.promise()).then(function (data) {
$content.html(data);
// Slide down and fadein (in sequence)
$container.animate({
height: 'show'
}, 500, function () {
$content.fadeTo('slow', 1.0);
});
});
The resolve values from each promise passed to $.when are passed to the then in order, so the first parameter passed will be the data from the $.get promise.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/pffm1tnb/11/

The issue is because you're not waiting for the hide animations to finish before loading the content, or waiting for the content to load before starting the show animations. You need to use the callback parameters of the relevant methods. Try this:
$(document).on('click', 'a', function(e) {
e.preventDefault();
var ahref = $(this).attr('href'),
$content = $('#content'),
$contentContainer = $('#content_container');
$contentContainer.animate({ height: 'hide'}, 500);
$content.fadeTo('slow', 0.25, function() {
// animation completed, load content:
$content.load(ahref, function() {
// load completed, show content:
$content.css({ opacity: 0.0 }).fadeTo('slow', 1.0);
$contentContainer.animate({ height: 'show' }, 500);
});
});
});
Note that for the effect to work the most effectively on the UI you would need to perform the load() after the animation which takes the longest to complete has finished.

Instead of using the load() function, you can use the get() function and its callback paramater to save the HTML into a variable before actually putting it into the element with html().
After doing all the animations to fade out and close the old box (and maybe inside an animation-finished callback function) you'll want to use something like the following:
$.get(ahref, function(data) {
// JQuery animation before we want to see the text.
$('#content').html(data); // actually inserts HTML into element.
// JQuery animation to fade the text in.
});

Using a bunch of the code everyone posted here, I rewrote the segment I originally had to follow suit. This is now my working result.
$(document).ready(function() {
// Start-Up Page Load (Cover, ToC, etc.)
$('#content').load('pages/page1.htm');
// Navigating Pages
$(document).on('click', 'a', function(e) {
e.preventDefault();
var ahref = $(this).attr('href');
$('#content').fadeTo('slow', 0.0)
$('#content_container').animate({height: 'hide'}, 500, function(){
$('#content').load(ahref + '#content', function(){
$('#content_container').animate({height: 'show'}, 500, function(){
$('#content').fadeTo('slow', 1.0);
});
});
});
return false;
});
});

You can use deferred or callbacks function
$(document).on('click', 'a', function(e) {
e.preventDefault();
var ahref = $(this).attr('href');
var dfd1 = $.Deferred();
var dfd2 = $.Deferred();
var dfd3 = $.Deferred();
var dfd4 = $.Deferred();
$('#content_container').animate({height: 'hide'}, 500, function(){
dfd1.resolve();
});
dfd1.done(function() {
$('#content').fadeTo('slow', 0.25, function() {
dfd2.resolve();
});
});
dfd2.done(function() {
$('#content').load(ahref, function() {
$('#content').css({opacity: 0.0});
dfd3.resolve();
});
});
dfd3.done(function() {
$('#content').fadeTo('slow', 1.0, function() {
dfd4.resolve();
});
});
dfd4.done(function() {
$('#content_container').animate({height: 'show'}, 500);
});
return false;
});

menu should hide when not being hovered over with timeout

What I am trying to accomplish is having a menu that will show up when a "button" is clicked (the button and menu are in separate elements so the mouse is not hovering over the menu initially).
The menu should hide itself if it is not hovered over within the duration of the timeout (currently it does this, but only the first time it is clicked).
Also, if the element gets hovered over, I would like hide on mouseout and clear the timer and clicking the button again would reset the timeout (it is not resetting maybe?).
I have tried several incarnations and nothing I have tried has behaved correctly and am looking for advice. This his is what I am currently using:
var mytimer = window.setTimeout(function() {$('.menu-div').slideUp(function() {
window.clearTimeout(this.mytimer);
})
}, 5000);
$().ready(function(){
$('#menu-button').click(function () {
$('.menu-div').slideDown();
$(mytimer);
});
$('.menu-div').mouseenter(function() {
window.clearTimeout(this.mytimer);
});
$('.menu-div').mouseout(function() {
$('.menu-div').slideUp(200);
});
});

I think you want something like this (just a guess, because you didn't give any HTML)
$(function(){
var mytimer=0;
$('#menu-button').click(function () {
$('.menu-div').slideDown();
mytimer = setTimeout(function(){
$('.menu-div').slideUp();
}, 5000);
});
$('.menu-div').mouseenter(function() {
clearTimeout(mytimer);
});
$('.menu-div').mouseleave(function() {
$('.menu-div').slideUp();
});
});
DEMO.

Jquery hide/show scroll animation

When I click on any year column (2012, 2011, 2010, etc) it shows the content of each year and hide the other ones.
The problem it's that when I click (2011 column for example), the animation does all the effects at the same time confusing the user, I think I have to do it with animation steps, but I haven't been able to come to a jquery solution.
This is my code:
/* Scroll Function */
function scrollto(position){
$('html, body').stop().animate({
scrollLeft: position
}, 1000);
}
/* Calendar Scroll */
$(".sub_section_title").click( function(e) {
e.preventDefault();
$(".contenido_calendario").hide();
$(this).next(".contenido_calendario").toggle('slow');
scrollto($(this).offset().left - 352)
});
I have tried fixing the effect by using .queue() but it doesn't work, I don't know if the code it's well written also:
$(".sub_section_title").click( function(e) {
e.preventDefault();
$(".contenido_calendario").hide();
$(".contenido_calendario").queue(function() {
scrollto($(this).offset().left - 352);
$(this).dequeue();
});
$(".contenido_calendario").queue(function() {
$(this).next(".contenido_calendario").toggle('slow')
$(this).dequeue();
});
});
The animation should be:
Click 2011 > Scroll 2011 column to the left (hide 2012 content) > show animation of contents

You want to take advantage of the callback features of the jQuery animations. So for hide, for example, you could do:
var outerContainer = $(this);
$(".contenido_calendario").hide(500, function() {
outerContainer.next(".contenido_calendario").toggle('slow', function() {
scrollto(outerContainer.offset().left - 352);
});
});
This will ensure that the animations are run when the previous one is finished.

Show image after there is hover on a link for 1500ms

I want to show an image after there is hover on link for atleast 1500ms or there is a click. How can I implement this minimal period hover condition while showing up the image ?
The image should remain visible until there is hover on the link or on itself. & should disappear as the mouse moves out of both. How can I implement this ? Thanks in advance!

http://jsfiddle.net/sSBxv/
$('a').click(function() {
alert(1); // alert on click
})
.hover(function() { // when mouse is entering
var $this = $(this);
// set timeout, save timeout id on element to clear later
$this.data('timeout', setTimeout(function() {
$this.click(); // click after 1500ms
}, 1500));
}, function() { // when mouse is leaving
clearTimeout($(this).data('timeout')); // stop the timeout
});

Try this
var hoverTimer;
$("linkSelector").hover(function() {
hoverTimer = setTimeout(function() {
$("imgSelector").show();
}, 1500);
}, function(){
clearTimeout(hoverTimer);
}).click(function(){
clearTimeout(hoverTimer);
$("imgSelector").show();
});

Something to the effect of...
$("#MyLinkSelectorId").hover(function() {
//Do anything you need to do here when it is clicked/hovered
setTimeout(function() {
//Do all of the other things here
}, 1500);
});
Switch out hover with click or bind multiple events to take care of both event types. To hide the images, you can either use a selector on the images with the .hide() method or you can set the opacity if the browser supports it.

$("a.class").hover( function (){ //First parameter is onmouseenter, show the image
$("img").show();
}, function (){ //second is onmouseleave, set a timeout that will hide the image
setTimeout( function(){
$("img").hide();
}, 1500);
}).click( function() { //on click, hide the image right away.
$("img").hide();
});

Since it looks like you haven't already tried something I'll give you the simplest way using jQuery (please note I haven't tested this):
$("#idOfDiv").mouseover(function() {
setTimeout("alertMsg()",1500);
});
function alertMsg()
{
alert('Ive been entered for 1500ms')
}
Also if you're serious about software development you should've been able to come up with this yourself.