Develop Reference

auto-scrolling will pause when user moves mouse over screen / graphs. And auto-scrolling will resume again if mouse movement is stopped

Hello I have working code for autoscrolling for page. I need to do some modification in that. Need to pause autoscrolling when user moves mouse on page and when there is no mouse movement then autoscrolling will resume.
<script>
$("html, body").animate({ scrollTop: $(document).height() }, 400000);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 400000);
},400000);
setInterval(function(){
// it will take 40 secound in total from the top of the page to the bottom
$("html, body").animate({ scrollTop: $(document).height() }, 400000);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 400000);
},400000);
},8000);
</script>

Hope this is what you looking for
var x = 10,
y = true,
z = 1,
maxscroll = 40,
mixscroll = 10;
setInterval(function() {
$('html, body').mousemove(function() {
z = 0;
});
if (z === 0) {
setTimeout(function() {
z = x;
}, 1000);
} else {
z = x;
if (y) {
$('html, body').animate({ scrollTop: ($(window).scrollTop() + z) + 'px' }, 300);
x++;
} else {
$('html, body').animate({ scrollTop: ($(window).scrollTop() + -(z)) + 'px' }, 300);
x--;
}
}
if (maxscroll < x && y) {
y = false;
} else if (x < mixscroll) {
y = true;
}
}, 500);
https://jsfiddle.net/donS/9xdz86yu/

you can use .stop() function in jQuery like ..
$("html, body").mouseover(function(){
$(this).stop();
});
try this FIDDLE

Building an animated menu with Jquery that responds to page scrolling

Sorry for the terrible title, but I'm not sure how else to describe what I'm trying to build. I'm using some code I found on this site, basically what I'm trying to do is build a left handed navigation menu, that highlights the appropriate section as the user scrolls to it.
$(document).ready(function() {
var topRange = 200, // measure from the top of the viewport to X pixels down
edgeMargin = 20, // margin above the top or margin from the end of the page
animationTime = 600, // time in milliseconds
contentTop = []; //array of sidebar links
$('nav ul').append('<div id="slider"></div>');
var sliderTop = $("nav ul li a").eq(0).parent().position().top;
var sliderLeft = $("nav ul li a").eq(0).parent().position().left;
var sliderHeight = $("nav ul li a").eq(0).parent().outerHeight();
$('#slider').css({
'height': sliderHeight,
'left': sliderLeft,
'top': sliderTop,
'width': '100%'
});
// Stop animated scroll if the user does something
$('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(e) {
if (e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel') {
$('html,body').stop();
}
})
// Set up content an array of locations
$('#sidebar').find('a').each(function() {
contentTop.push($($(this).attr('href')).offset().top);
})
// Animate menu scroll to content
$('#sidebar').find('a').click(function() {
var sel = this,
newTop = Math.min(contentTop[$('#sidebar a').index($(this))], $(document).height() - $(window).height()); // get content top or top position if at the document bottom
$('html,body').stop().animate({
'scrollTop': newTop
}, animationTime, function() {
window.location.hash = $(sel).attr('href');
});
return false;
})
//scroll function
function scroller() {
var winTop = $(window).scrollTop(),
bodyHt = $(document).height(),
vpHt = $(window).height() + edgeMargin; // viewport height + margin
$.each(contentTop, function(i, loc) {
if ((loc > winTop - edgeMargin && (loc < winTop + topRange || (winTop + vpHt) >= bodyHt))) {
//animate slider
x = $("#sidebar li").eq(i).position();
$("#slider").animate({
top: (x.top)
}, 100);
}
})
}
//scroll event handler
$(window).scroll(scroller)
})
I have most of it working, however when you actually click a link on the menu the animation is very slow to catch up with the actual scrolling. I understand why this is happening, because it updates the position one at a time after each section is reached, but I'm wondering if there's a way to make this animation faster, and more fluid. I've attached a fiddle with my code, thank you in advance for your help!
http://jsfiddle.net/jamesmyers/6mbmq1pe/

You will get a better slider animation effect by temporarily detaching the scroll handler and scrolling the slider directly, with the same animationTime as for the main animation.
To do this, you also need to :
namespace the scroll event .nav, to allow safe use of .off()
stop() the slider animation in the "if the user does something" block
I've also included a few efficiency savings in the way contentTop and #slider are set up but these are not actually necessary.
$(document).ready(function() {
var topRange = 200, // measure from the top of the viewport to X pixels down
edgeMargin = 20, // margin above the top or margin from the end of the page
animationTime = 600, // time in milliseconds
contentTop, //array of sidebar links
navLinkWrapper = $("nav ul li a").eq(0).parent();
var $slider = $("<div id=\"slider\" />").css({
'height': navLinkWrapper.outerHeight(),
'left': navLinkWrapper.position().left,
'top': navLinkWrapper.position().top,
'width': '100%'
}).appendTo($('nav ul'));
// Stop animated scroll if the user does something
$('html,body').on('scroll mousedown DOMMouseScroll mousewheel keyup', function(e) {
if (e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel') {
$('html,body').stop();
$slider.stop(); //<<<<<<<
}
});
// Set up content an array of locations
contentTop = $('#sidebar a').map(function() {
return $($(this).attr('href')).offset().top;
});
// Animate menu scroll to content
$('#sidebar a').on('click', function(e) {
e.preventDefault();
$(window).off('scroll.nav', scroller); //<<<<<<<
$slider.stop().animate({ //<<<<<<<
top: ($(this).closest("li").position().top) //<<<<<<<
}, animationTime); //<<<<<<<
var sel = this,
newTop = Math.min(contentTop[$('#sidebar a').index($(this))], $(document).height() - $(window).height()); // get content top or top position if at the document bottom
$('html,body').stop().animate({
'scrollTop': newTop
}, animationTime, function() {
window.location.hash = $(sel).attr('href');
$(window).on('scroll.nav', scroller); //<<<<<<<
});
});
//scroll function
function scroller() {
var winTop = $(window).scrollTop(),
bodyHt = $(document).height(),
vpHt = $(window).height() + edgeMargin; // viewport height + margin
$.each(contentTop, function(i, loc) {
if ((loc > winTop - edgeMargin && (loc < winTop + topRange || (winTop + vpHt) >= bodyHt))) {
//animate slider
$slider.animate({
top: ($("#sidebar li").eq(i).position().top)
}, 100);
}
});
}
//scroll event handler
$(window).on('scroll.nav', scroller); //<<<<<<<
});
Updated fiddle

Maximum height when opening a div

How do I make a max height?
animate( { height: '500px' } to animate( { height: '100%' }
I have some heights with 200px 300px 400px 800px.
$(document).ready(function() {
$("#updo").click(function(){
$("#updo_folder").stop();
$("#updo_folder").show();
if($("#updo_folder").height() < 1){
$("#updo_folder").animate( { height: '500px' }, 1000 , function(){$(this).show();});
}else{
$("#updo_folder").animate( { height: '0px' }, 1000, function(){$(this).hide();});
}
});
});
var jump=function(e)
{
e.preventDefault();
var target = $(this).attr("href");
$('html,body').animate(
{
scrollTop: $(target).offset().top
},500,function()
{
location.hash = target;
});
}
$(document).ready(function()
{
$('a[href*=#]').bind("click", jump);
return false;
});
http://jsfiddle.net/prffrost/TFBeu/4/

You set height: 100%, measure it, then set height: 0px again and animate to that height:
$(document).ready(function () {
$("#updo").click(function () {
// Use a variable rather than endlessly repeating the lookup
var folder = $("#updo_folder");
var targetHeight;
folder.stop().show();
if (folder.height() < 1) {
// Set it to full height
folder.css("height", "100%");
// Measure it
targetHeight = folder.height();
// Set back to zero height, and animate to the measured height
folder.css("height", "0px");
folder.animate({
height: targetHeight
}, 1000, function () {
$(this).show();
});
} else {
folder.animate({
height: '0px'
}, 1000, function () {
$(this).hide();
});
}
});
});
Updated Fiddle

jQuery scrollTop being buggy

I'm trying to make a sub navigation menu animate a fixed position change after a user has scrolled down 200 pixels from the top. It works but it's very buggy, like when the user scrolls back to the top it doesn't always return to the original position, etc. I'm not strong with javascript / jquery, but I thought this would be simple to do. What am I missing?
Here's my fidde:
http://jsfiddle.net/visevo/bx67Z/
and a code snippet:
(function() {
console.log( "hello" );
var target = $('#side-nav');
var scrollDis = 200;
var reset = 20;
var speed = 500;
$(window).scroll(function() {
console.log( $(window).scrollTop() );
if( $(window).scrollTop() > scrollDis ) {
$(target).animate({
top: reset + 'px'
}, speed);
} else {
$(target).animate({
top: scrollDis + 'px'
}, speed);
}
});
})();

How about a little bit of css and jquery both ??
What I did is added transition to side-nav to animate it and rectified your js to just change it's css. You can set how fast it moves by changing the time in transition.
FIDDLE
#side-nav {
position: fixed;
top: 100px;
left: 10px;
width: 100px;
background: #ccc;
-webkit-transition:all 0.5s ease-in-out;
}
(function () {
var target = $('#side-nav');
var scrollDis = 100;
var reset = 20;
var speed = 500;
$(window).scroll(function () {
if ($(this).scrollTop() >= scrollDis) {
target.css("top", reset);
} else {
target.css("top", scrollDis);
}
});
})();
NOTE: When you cache a jQuery object like this
var target = $("#side-nav");
You don't need to use $ again around the variable.

Since I am commenting all over the place I should probably actually contribute an answer.
The issue is that you are adding scroll events every time a scroll occurs, which is causing more scrolling to occur, which causes more scroll events, hence infinite loop. While cancelling previous events will fix the problem, it's cleaner to only fire the event when you pass the threshold, IE:
(function () {
console.log("hello");
var target = $('#side-nav');
var scrollDis = 200;
var reset = 20;
var speed = 500;
var passedPosition = false;
var bolMoving = false;
$(window).scroll(function () {
if (bolMoving) return; // Cancel double calls.
console.log($(window).scrollTop());
if (($(window).scrollTop() > scrollDis) && !passedPosition) {
bolMoving = true; //
$(target).animate({
top: reset + 'px'
}, speed, function() { bolMoving = false; passedPosition = true; });
} else if (passedPosition && $(window).scrollTop() <= scrollDis) {
bolMoving = true;
$(target).animate({
top: scrollDis + 'px'
}, speed, function() { bolMoving = false; passedPosition = false; });
}
});
})();
http://jsfiddle.net/bx67Z/12/

http://jsfiddle.net/bx67Z/3/
I just added .stop() in front of the .animate() , and it works a lot better already.
$(target).stop().animate({
top: reset + 'px'
}, speed);
} else {
$(target).stop().animate({
top: scrollDis + 'px'
}, speed);
You can also use .stop(true)
http://jsfiddle.net/bx67Z/5/
$(target).stop(true).animate({
top: reset + 'px'
}, speed);
} else {
$(target).stop(true).animate({
top: scrollDis + 'px'
}, speed);
You can also use .stop(true, true)
http://jsfiddle.net/bx67Z/4/
$(target).stop(true, true).animate({
top: reset + 'px'
}, speed);
} else {
$(target).stop(true, true).animate({
top: scrollDis + 'px'
}, speed);
So the reason .stop(true) works so well, is that it clears the animation queue. The reason yours was being "buggy" is because on every scroll the animation queue was "bubbling up" , thus it took a long time for it to reach the point where it would scroll back to the original position.
For information about .stop() , see here http://api.jquery.com/stop

jQuery: Something is delaying animations

What makes the animation delay?
All jQuery on the site is having some sort of delay..
$(function(){
$(window).scroll(function() {
var elementTop = $('body').offset().top;
var position = elementTop+ $(window).scrollTop();
if(position >= 20){
$('#top').animate({top: '40px'}, 300);
} else if(position < 20){
$('#top').animate({top: '80px'}, 300);
}
console.log(position);
});
});
Live:
Link here - It's the menu/navigation

Your code is being fired each time you scroll. The animate methods are being concatenated, running one after the other. To achieve what you want, you need to stop the current animation and start a new one:
$(function(){
$(window).scroll(function(){
var elementTop = $('body').offset().top,
position = elementTop+ $(window).scrollTop();
if (position >= 20){
$('#top').stop().animate({top: '40px'}, 300);
}
else if (position < 20) {
$('#top').stop().animate({top: '80px'}, 300);
}
});
});