I'm trying to make a script that scrolls the page automatically to the specific element when I scroll my mouse, but for some reason my animation gets repeated and the scroll goes back and forth.
Edit:
I would like to point out that this doesn't happen if the page scrolls to the last element on the page, but if it scrolls to the second element it will bounce instantly back to the top.
Here's my jQuery:
$(document).ready(function(){
comp = 0;
current_scroll_position = $(window).scrollTop();
console.log("CURRENT SCROLL POSITION = " +current_scroll_position);
second = $("#second").offset().top;
$(window).scroll(function(scroll_action){
$('body').on({
'mousewheel': function(e) {
e.preventDefault();
e.stopPropagation();
}
});
if(comp==0){
console.log("COMP =" +comp);
comp++;
new_scroll_position = $(window).scrollTop();
console.log("YOU SCROLLED, NEW CURRENT POSITION IS :" +new_scroll_position);
if (new_scroll_position > current_scroll_position){ //scroll going down
console.log(new_scroll_position +" > "+ current_scroll_position +" GOING DOWN");
$('body').animate({
scrollTop: second
}, 500,
function(){ //callback function for completed animation
completed_animation_scroll = true;
current_scroll_position = $(window).scrollTop();
console.log(" ANIMATING ");
console.log("CURRENT SCROLL POSITION = " +current_scroll_position);
console.log("NEW SCROLL POSITION = " +new_scroll_position);
console.log("ANIMATION COMPLETED = " +completed_animation_scroll);
console.log(" ******************* ************************ ******************");
$('body').unbind('mousewheel');
comp = 0;
});
}
else{
console.log(new_scroll_position +" > "+ current_scroll_position +" GOING DOWN");
$('body').animate({
scrollTop: 0
}, 500,
function(){ //callback function for completed animation
completed_animation_scroll = true;
current_scroll_position = $(window).scrollTop();
console.log(" ANIMATING ");
console.log("CURRENT SCROLL POSITION = " +current_scroll_position);
console.log("NEW SCROLL POSITION = " +new_scroll_position);
console.log("ANIMATION COMPLETED = " +completed_animation_scroll);
console.log(" ******************* ************************ ******************");
$('body').unbind('mousewheel');
comp = 0;
});
}
}
});
});
Try it:
http://jsfiddle.net/81t6w6zv/2/
The problem is in fact that when scrolling animation is done (including success callback), $(window).scroll handler is triggered and works again (because scrolling animation is actually scrolling and comp becomes equal to 0).
The easiest way to fix it is to wrap comp = 0 in scrolling animation callback function with setTimeout (I changed type of comp variable to bool):
setTimeout
(
function()
{
comp = false;
},
100
);
There are also some "not good things" like binding mousewheel event handler but not unbinding it (if comp not equals to 0), so please take a look at updated fiddle to fix such problems in your code.
And full code:
$(document).ready(function()
{
var comp = false;
var current_scroll_position = $(window).scrollTop();
var secondOffsetTop = $("#second").offset().top;
$(window).scroll(function()
{
if (comp)
{
return;
}
comp = true;
$('body').on('mousewheel', function()
{
return false;
});
var scrollTo = 0;
if ($(window).scrollTop() > current_scroll_position)
{
scrollTo = secondOffsetTop;
}
$('body').animate
(
{
scrollTop: scrollTo
},
500,
function()
{
current_scroll_position = $(window).scrollTop();
$('body').off('mousewheel');
setTimeout
(
function()
{
comp = false;
},
100
);
}
);
});
});
Related
I know the scrollBy functions but is it possible to scroll down a web page with a command typed in the JavaScript console, so that the page automatically scrolls with the passed parameters?
Typing the function
function pageScroll() {
window.scrollBy(0,50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}
and then calling it does nothing in Chrome.
Give this a try; I use it myself often.
(function() {
var intervalObj = null;
var retry = 0;
var clickHandler = function() {
console.log("Clicked; stopping autoscroll");
clearInterval(intervalObj);
document.body.removeEventListener("click", clickHandler);
}
function scrollDown() {
var scrollHeight = document.body.scrollHeight,
scrollTop = document.body.scrollTop,
innerHeight = window.innerHeight,
difference = (scrollHeight - scrollTop) - innerHeight
if (difference > 0) {
window.scrollBy(0, difference);
if (retry > 0) {
retry = 0;
}
console.log("scrolling down more");
} else {
if (retry >= 3) {
console.log("reached bottom of page; stopping");
clearInterval(intervalObj);
document.body.removeEventListener("click", clickHandler);
} else {
console.log("[apparenty] hit bottom of page; retrying: " + (retry + 1));
retry++;
}
}
}
document.body.addEventListener("click", clickHandler);
intervalObj = setInterval(scrollDown, 1000);
})()
It might show you an error "too much recursion"
You should try setInterval() instead of setTimeout(). Check this sample code for that.
setInterval(function(){
window.scrollBy(0,50);
},100);
How to cancel function using clearTimeout() when stay bottom page less than 4 sec.?
When stay at bottom page 4 sec, will alert, it's OK ^^
But when stay at bottom page less than 4 sec, then scroll to top page, Why it's will be alert too
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
$(window).scroll(function(){
var height = $('#idpage').height();
var scroll_top = $(this).scrollTop();
if(($(window).scrollTop() + $(window).height() == $(document).height())){
var timer = setTimeout(function() {
alert("bottom");
}, 4000);
}
else{
clearTimeout(timer);
}
});
</script>
You have declared timer as a local variable so every time the scroll handler is called a new variable reference is used. Instead you need to preserve the value of the previous timer so you need to declare the variable outside the scope of the scroll handler like
var timer;
$(window).scroll(function () {
var height = $('#idpage').height();
var scroll_top = $(this).scrollTop();
if (($(window).scrollTop() + $(window).height() == $(document).height())) {
timer = setTimeout(function () {
alert("bottom");
}, 4000);
} else {
clearTimeout(timer);
}
});
You need to define timer variable on the top of scroll event.
var timer = 0;
$(window).scroll(function(){
var height = $('#idpage').height();
var scroll_top = $(this).scrollTop();
if(($(window).scrollTop() + $(window).height() == $(document).height())){
var timer = setTimeout(function() {
}, 4000);
}
else{
if ( timer) {
console.log(timer);
clearTimeout(timer);
}
}
});
I have a "follow scroll" function, but I want it to turn off when it returns to a certain point. My code is as follows:
scrollSidebar: function(scroll) {
var elemPos = $('#bestvideos-2').offset().top,
scroll2 = scroll;
if(scroll2 >= elemPos) {
$('#bestvideos-2').animate({
'margin-top':(scroll - 315)+'px'
},0);
} else {
$('#bestvideos-2').css('margin-top','0');
}
}
$(window).scroll(function() {
var scrollHeight = $(window).scrollTop();
Scroll.scrollSidebar(scrollHeight);
})
The problem is - every time I get up, it goes way up, not following scroll. What I'm thinking is storing a variable elemPos somewhere and keep it static (now it's changing each time I scroll).
What can I do with this?
Pass the value to the scrollSidebar function - make sure that the var elemPos = $('#bestvideos-2').offset().top is executed on dom ready
scrollSidebar: function (elemPos, scroll) {
var scroll2 = scroll;
if (scroll2 >= elemPos) {
$('#bestvideos-2').animate({
'margin-top': (scroll - 315) + 'px'
}, 0);
} else {
$('#bestvideos-2').css('margin-top', '0');
}
}
var elemPos = $('#bestvideos-2').offset().top
$(window).scroll(function () {
var scrollHeight = $(window).scrollTop();
Scroll.scrollSidebar(elemPos, scrollHeight);
})
I need a bit of advice as I can't get my noob head around the following, please see this fiddle: http://jsfiddle.net/NtUpw/
The code works as intended, but when the current div offset goes > 41 and prev is hit, I'd like the page to return to the beginning of the current div, not to one before that. Any idea how can I add this condition?
I realise the current code isn't the cleanest (actually it's a combination of two fiddles), but I hope someone could take a look at it anyway. Thanks.
$('a.buttons').on('click', function (e) {
e.preventDefault();
var t = $(this).text(),
that = $(this);
if (t === 'next' && $('.current').next('div.post').length > 0 ) {
var $next = $('.current').next('.post');
var top = $next.offset().top;
$('body').animate({
scrollTop: $('.current').next('div.post').offset().top - 40
});
} else if (t === 'prev' && $('.current').prev('div.post').length > 0 ) {
var $prev = $('.current').prev('.post');
var top = $prev.offset().top;
$('body').animate({
scrollTop: $('.current').prev('div.post').offset().top - 40
});
}
$(window).bind('scroll', function () {
$('.post').each(function () {
var post = $(this);
var position = post.position().top - $(window).scrollTop();
if (position <= 40) {
post.addClass('current');
post.prev().removeClass("current");
} else {
post.removeClass('current');
}
});
});
The prev action works by moving always the div to the previous; the solution is to check the current position of the navigator respect to the current div:
var $prev;
var top;
var firstElem = true;
if ($('.current').prev('div.post').length > 0) {
$prev = $('.current').prev('.post');
top = $prev.offset().top;
firstElem = false
}
var currTop = $('.current').offset().top;
var navBottom = $('.navigation').offset().top + 40;
if (currTop == navBottom && !firstElem) {
$('body,html').animate({
scrollTop: $('.current').prev('div.post').offset().top - 40
});
with this the navigator jumps to the previous div only if is not at the top of the current; alternatively jumps to the previous.
The firefox issue depends on how Firefox places the overflow, it places it at the html level not at body like other browsers.
To let it work you must define the scrolling action with:
$('body,html').animate({
});
Working fiddle: http://jsfiddle.net/IrvinDominin/2QYgR/3/
So,
if($(this).hasClass('active')){
$(this).removeClass('active');
$(this).prev().addClass('active');
}
works fine, it adds the class "active" to this previous div of the same kind.
if($(this).hasClass('active')){
$(this).removeClass('active');
$(this).next().addClass('active');
}
However, adds the class to the next div (as i intend for it to do) for about 0.5 of a second BUT then removes it.
Here's ALL of the jQuery (as per your comments below) - Please do not comment on my horrible code organization
$(window).load(function () {
// Initial variables
var numberSlides = 0;
var currentSlide = 1;
var ready = true;
var pageWidthR = $(document).width() - 352;
var pageWidthL = $(document).width() - 352;
// Update number of slides by number of .slide elements
$('#features-slider .slide').each(function () {
numberSlides++;
});
// Go through each slide and move it to the left of the screen
var i = 0;
$($('#features-slider .slide').get().reverse()).each(function () {
if (i == 0) {
} else {
var newWidth = i * 115;
$(this).css('left', '-' + newWidth + '%');
}
i++;
});
// Animate the first slide in
$('#features-slider .slide:last-child').addClass('active').animate({
left: 0
}, 1500);
// Remove the loading message
$('#loading').fadeOut(1000, function () {
$('#loading').remove();
// Now that we're done - we can show it
$('#features-slider').show();
});
/***** Left and Right buttons *****/
/* Right */
$('#rightbutton').click(function () {
var numberSlides = 0;
$('#features-slider .slide').each(function () {
numberSlides++;
});
var index = $('.slide.active').index() + 1;
if (!$('.slide').is(':animated') && index != 1) {
$('#features-slider .slide').each(function () {
if ($(this).hasClass('active')) {
var currentLeft = $(this).css('left');
var newLeft = parseInt(currentLeft) + 115;
} else {
var currentLeft = $(this).css('left');
var newLeft = parseInt(currentLeft) + 115;
}
$(this).animate({
left: newLeft + '%'
}, 1500);
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(this).prev().addClass('active');
}
});
}
});
/* Left */
$('#leftbutton').click(function () {
var numberSlides = 0;
$('#features-slider .slide').each(function () {
numberSlides++;
});
var index = $('.slide.active').index() + 1;
if (!$('.slide').is(':animated') && index != numberSlides) {
$('#features-slider .slide').each(function () {
if ($(this).hasClass('active')) {
var currentLeft = $(this).css('left');
var newLeft = parseInt(currentLeft) - 115;
} else {
var currentLeft = $(this).css('left');
var newLeft = parseInt(currentLeft) - 115;
}
$(this).animate({
left: newLeft + '%'
}, 1500);
if ($(this).hasClass('active')) {
$(this).next().addClass('active');
$(this).removeClass('active').not($(this).next());
}
});
}
});
});
$(document).ready(function () {
// Hide the slider and show a loading message while we do stuff and the images / DOM loads - Also disable overflow on the body so no horizontal scrollbar is shown
$('body').css('overflow-x', 'hidden');
$('#features-slider').hide();
$('#loading').html('<center> <img id="loader" src="/wp-content/themes/responsive/library/images/ajax-loader.gif" /> Loading</center>');
});
RESOLVED
New left button function :
$('#leftbutton').click(function(){
var numberSlides = 0;
$('#features-slider .slide').each(function(){
numberSlides++;
});
var index = $('.slide.active').index()+1;
if( !$('.slide').is(':animated') && index != numberSlides ){
var done = false;
$('#features-slider .slide').each(function(){
if($(this).hasClass('active')){
var currentLeft = $(this).css('left');
var newLeft = parseInt(currentLeft)-115;
} else {
var currentLeft = $(this).css('left');
var newLeft = parseInt(currentLeft)-115;
}
$(this).animate({left: newLeft+'%'}, 1500);
if($(this).hasClass('active') && done == false){
$(this).next().addClass('active');
$(this).removeClass('active');
done = true;
}
});
});
If you're iterating forward through the elements, then it should be clear what's going on - you add the "active" class to the next element, and then the next iteration takes it away.
This is just a guess however as you did not post enough code for me (or anybody else) to be sure.
edit — ok now that you've updated the question, it's clear that the guess was correct. The .each() function will iterate forward through the elements. When an element has the "active" class, and the code removes it and adds it to the next element, then on the next iteration the work is undone.
Since you are referencing this and by the behavior you're describing, you are likely iterating a loop for a list of elements. As a result, you are completing the action you want but the next iteration is removing the previous changes due to your usage of removing a class and then adding the class back.
As it stands now, your code does not illustrate how this occurence can be happening.
Update:
As suspected, you seem to be looping as signified by: each(function(){. While iterating through your objects the class is being pushed forward and is not acting as desired. You are stating add the class to the next element, but remove it from the current element, and this behavior continues through your iteration.
On a side note, update your code to call removeClass() on the current object first, before adding it to the next object:
if ($(this).hasClass('active')) {
$(this).removeClass('active').next().addClass('active');
}