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

Jquery - waypoints - animate nav

Here is my idea:
List item a black border that follow scroll on nav
List item
scroll to a <div> on click
it's hard to explain (I'm french) so just try it on:
http://mathieualbore.com/traci/
It work when you click from smilio > skiply but not working if start from skiply and click > smilio
the code :
$("#smilio").waypoint({
handler: function(event, direction) {
left = $('.menu li[data-target="#smilio"]').position().left;
w = $('.menu li[data-target="#smilio"] span').width();
$('.active').stop().animate({ left: left, width: w+40 })
},
offset: 40
});
$("#skiply").waypoint({
handler:
function(event, direction) {
left = $('.menu li[data-target="#skiply"]').position().left;
w = $('.menu li[data-target="#skiply"] span').width();
$('.active').stop().animate({ left: left, width: w+40 })
},
offset: 40
});
and
$(".menu li").click(function() {
var target = $(this).data("target");
var scrollY = $(target).position().top;
$("html, body").animate({ scrollTop: scrollY-40 }, 500);
}

I find a way to do the trick if someone is interested
$(".menu li, a").click(function() {
var target = $(this).data("target");
var scrollY = $(target).position().top;
$("html, body").animate({
scrollTop: scrollY-40
}, 500, function() {
left = $('.menu li[data-target="'+target+'"]').position().left;
w = $('.menu li[data-target="'+target+'"]').width();
$('.active').stop().animate({
left: left,
width: w+40
})
});
});

And this to simplify waypoints :
$(".menu li").each(function() {
var target = $(this).data("target");
$(target).waypoint({
handler: function(event, direction) {
left = $('.menu li[data-target="'+target+'"]').position().left;
w = $('.menu li[data-target="'+target+'"]').width();
$('.active').stop().animate({ left: left, width: w+40 })
},
offset: 40
});
});

Toggle menu on click of two elements

var main = function() {
$('#menu-open').click(function() {
$('.menu').animate({ left: '0px' }, 200);
$('body').animate({ left: '285px' }, 200);
});
$('#menu-close').click(function() {
$('.menu').animate({ left: '-285px' }, 200);
$('body').animate({ left: '0px' }, 200);
});
};
$(document).ready(main);
I want to be able to close the menu with the click of #menu-close or #menu-open when the menu is open. How can I do this?

You can bind single function to both open/close button. Inside the function, check the menu status. Example:
$('.menu-open, .menu-close').click(function() {
var left = $('.menu').offset().left;
if (left < 0) {
$('.menu').animate({ left: 0 }, 200);
$('body').animate({ left: 285 }, 200);
} else {
$('.menu').animate({ left: -285 }, 200);
$('body').animate({ left: 0 }, 200);
}
});
EDIT
This is updated fiddle:
https://jsfiddle.net/mahdaen/jsf0oc99/3/

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

Animate Back To Top Button

I have a back to top button that fades in at certain points on scroll. I am looking to change the script so instead of fading in and out that the button slides left 50px then slides right -50px; (off the screen)
Here is my code for fading in and out:
var offset = 220;
var duration = 500;
$(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
$('.back-to-top').fadeIn(duration);
} else {
$('.back-to-top').fadeOut(duration);
}
});
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, duration);
return false;
})
I tried this but its not working for me:
var offset = 220;
var duration = 500;
$(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
$('.back-to-top').animate({ "left": "+=50px" }, duration );
} else {
$('.back-to-top').animate({ "right": "+=50px" }, duration );
}
});
Any help would be greatly appreciated.

Try this...
$(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
$('.back-to-top').animate({"left":"-50px"}, "slow").removeClass('visible');
} else {
$('.back-to-top').animate({"left":"50px"}, "slow").addClass('visible');
}
});
or you can use the jquery UI based example..like this
$('.back-to-top').hide('slide', {direction: 'left'}, 1000);

How abt this one :-
var offset = 220;
var duration = 500;
$(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
$('.back-to-top').animate({ "right": "+100px" }, duration );
} else {
$('.back-to-top').animate({ "left": "0px" }, duration );
}
});