I have a rogue scroll event that keeps automatically scrolling my page to the top each time I load a div element using Ajax. How do I track this down? I've tried setting breakpoint in scroll event handler and looking at callstack but that doesn't give me anything useful since it just shows it coming from jquery, but I am interested in knowing what event on what DOM element caused the scroll.
A little background, I am loading a div element using Ajax when a div element is clicked (onclick). NOTE this is not anchor!! But whenever I am close or at the bottom of the page, after the div element is loaded and added to the page, the page scrolls all the way to the top. Really annoying and trying to track down the element that initiated that rogue scroll...
Thank!
try looking into waypoints plugin if you don't mind a jQuery plugin , this one is great from tracking / handling scrolling
If I've understood fine you need a code similar to this, in this code I show new data from ajax when the user is (through scroll) to a distance of 4000 pixels from the last element (in this case a div.newDeal:last) (was a very long web).
$(document).ready(function() {
//global variable in this script to test if I already made the request ajax ( I dont
//want to make continious ajax request)
var loaded=false;
$(window).bind('scroll', handlerScroll); //attach event to the scroll
})//end document ready
//FIRE AUTOSCROLL (FIRE REQUEST AJAX)
//*************************************
var handlerScroll=function (){
//get position of the scroll
var space=$('#listdeals div.newDeal:last').offset().top - $(window).scrollTop();
//if that distance is less than (or the middle, or the bottom). fire the request ajax
if (space<= 4000 && jQuery('div.previousDeal').size()==0){
//disable scroll event
$(window).unbind();
//
//build data post
//
var parameters="actionAutoscroll=true&"+.........;
//MAKE REQUEST AJAX
//********************
$.ajax({
url: "/offers",
type:'POST',
data: parameters,
success: process_previousDeals
}); //end ajax
return false;
}
}//end if load previous deals depending of scroll
}//end handler
function process_previousDeals(results){
//inject new content in the page
}
Related
I have observed that after a refresh, by pressing F5 or even some location.reload();, the browser forces a scroll to the last position it was before the refresh.
The thing is, we track the user's progress across the page, and this "automatic" scroll fires all the checkpoints we have placed all the way to this last position before the refresh.
We are wondering whether is it possible to differ this "automatic" scroll from a scroll made by the user.
For instance, we have lots of:
$(window).scroll(function() {
var windowMax = $(window).scrollTop()+$(window).innerHeight()/2;
if (windowMax > .....)
});
Is there a way to differentiate this two sorts of scrolls?
Edit
Please, see that I don't want to prevent the automatic scroll, I want to differ it.
You can add a ready event listener and immediately check the .scrollTop() after it has been loaded.
var isScrolledAfterRefresh;
$(function() {
isScrolledAfterRefresh = $(window).scrollTop() > 0;
});
You do need to be sure that the rest of your code is executed after the ready event is fired.
This is something embedded in the users browsers. One way to counter it I suppose is to not have scrolling enabled on body or HTML, and have a custom scroll inside an element that is not on the top layer
You could also deffer recording of the scrolling until the page has fulling been rendered and the document completely loaded.
You could use the following to do stuff when the document is ready :
$(document).ready(function(){
// do stuff here
});
The overall goal of this task is to animate scroll the user to a certain div lower down on the page, depending on whatever #hashName is appended to url.
The html I am working with does not have the correct div id added, so I am adding that via javascript on document ready. Once the div id is added, then I have script that determines the hash passed in, then pass the user to the hash. This following code works:
jQuery(document).ready(function($){
//append new div id to current FAQ class
document.querySelector('.press-24_tab').id = 'faq';
//now that we have correct div id, animate user to this div
var target = window.location.hash;
$('html, body').animate({scrollTop: $(window.location.hash).offset().top}, 'slow', function() {
//in animate callback, attempt to keep user focused here
$('#faq').focus();
});
});
I am calling jQuery etc in the code so I can use this in WordPress.
This code works fine. My problem is, this script fires while the page is loading. And the page keeps loading. And as a result, the page focus goes back to the top of the page!
I was thinking of wrapping the animate to hash code inside $(window).on('load', function(){}); but this does not seem to work. Note my existing animate callback trying to keep user focused - but this is not sticking. Page still loads. Page takes a loooooooong time to load, so I am fighting against this.
So at this point I have hit a brick wall. I am reaching out to those smarter than me in javascript and jQuery to see what I have to do here. Any help would be greatly appreciated.
jquery(document).ready() will fire as soon as the DOM is ready so this is actually working as expected by the looks of things as the DOM isn't the same thing as the document itself.
If you need to wait for external content like web-fonts, images, videos etc you should use the window.load() event
jquery(window).load(function() {
//append new div id to current FAQ class
document.querySelector('.press-24_tab').id = 'faq';
//now that we have correct div id, animate user to this div
var target = window.location.hash;
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top
}, 'slow', function() {
//in animate callback, attempt to keep user focused here
$('#faq').focus();
});
});
Have a look through the documentation for DOM here.
I am trying to get a div that refreshes every 2 seconds to stop scrolling back to the top after the 2 second refresh I have PHP code and javascript. The Javascript I am using is:
function at_Ticket_scrollBottom()
{
var objDiv = document.getElementById("cartTicket");
objDiv.scrollTop = objDiv.scrollHeight;
}
function at_Tabs_Update()
{
if(div_WPOSVar_IsVisible())
{
//calling setTimeout without clearing any existing timeout can add multiple calls.
//IE the normal 2 second sequence, then call at_Tabs_Update two more times, and
// now we have 3 timeouts set to call at_Tabs again, etc.
//This wouldn't be an issue except that we call at_Tabs_Update directly to cause
// immediate refresh from many places.
//So clear the handle everytime to get rid of the last one we set.
clearTimeout(at_Tabs_Timer);
at_Tabs_Timer=setTimeout("at_Tabs_Update()", 2*1000); //every 2 seconds
return;
}
}
So after the refresh if I scroll down to the bottom of the ticket it jumps back to the top after the next refresh so I can never get to the bottom and select an item and edit it before the refresh how do I stop the auto scroll back to the top.
from the scars infos I can gather here I think your best bet would be to save your current scroll position before you refresh and after the ajax call scroll to that saved position.
use jQuerys .scrollTop() function for both reading and setting the scroll.
some pseudo code for illustration:
at ajax refresh function
var curPos $(element).scrollTop();
... do ajax call ..
ajax callback: $(element).scrollTop(curPos);
I have a web page that basically contains a large table, I use ajax to automatically create and populate the table every minute. the basic code structure is like this:
$(document).ready(function(){
setInterval(function(){
$.ajax({
//code to call backend, get the data,
//create/populate the table, and refresh every minute
});
});
}
Since the table is quite long, I'd like to have it automatically scroll down, pause a couple of second,continue to scroll down, pause again. And when it reaches the end, it will scroll up, pause...or maybe once it reaches the end, start from the top and do it all over again. While it's scrolling, I'd also like to to keep its table header row fixed at the top.
My questions are:
is it possible to do this using some jquery function or javascript?
how would this automatic scrolling function interfere with the ajax? say it's in the middle of scrolling down and it's time for ajax table refresh?
is it possible to do this using some jquery function or javascript?
Very easy to accomplish using jQuery/javascript.
how would this automatic scrolling function interfere with the ajax? say it's in the middle of scrolling down and it's time for ajax
table refresh?
I would put your code to animate the scrolling in your ajax success. Animate the scroll to a time interval that is shorter than your AJAX interval.
Something like this
setInterval(function(){
$.ajax({
type : "",
dataType: "",
url : "",
data : "",
success : function(data)
{
// create/append data to table
// animate scroll to bottom of table
$("#my_table").animate({ scrollTop: $("#my_table").height() }, "slow");
}
});
});
Not sure if the scroll code is 100% correct, but it should start you out.
So here is what's going on. I have an html doc called "home.html". It contains many divs, each of these divs is a single post. I also have an index.html and in the it there is a div #content. The content is empty in the index.html but it gets filled with the divs in home.html through .load() call. Also, using div:nth-child(-n + 10) in the .load call I can have it only load the first ten posts. How can I use waypoint.js to add infinite scrolling to this? So that once the scroll bar reaches 75% of the way to the bottom, it loads the next 10 divs from home.html.
After you load the 10 elements on the page, wire up a jquery waypoint that will trigger an action.
The first step of the action will be to disable to waypoint (so it only fires once). Then have it load additional data via ajax and render that on the page. After (via callback) that is done, you'll reactivate the waypoint so that the process will start anew when the user scrolls down to it.
Your application will have to keep track of how many and what elements are loaded, so your ajax requests request the correct numbers (i.e. 10 are loaded, so the next request should start at 10 and fetch 10, next should start at 20 and fetch 10, etc).
The "75% of the way to the bottom" is easily configurable in waypoint. You'll use the "offset" for that.
Check out the waypoint documentation
I put the DOM element that triggers my infinite scrolling underneath of the main grid that I have, so as I load more content, it automatically pushes it down.
I used jquery masonry+waypoint js..But if you dont register waypoint in masonry callback, it will load the items that comes with your ajax call more than once..Here is my solution;
//INFINITE SCROLL
var $loading = $("#itemsloading"),
$footer = $('footer'),
opts = {
offset: '120%',
onlyOnScroll:false
};
$footer.waypoint(function(event, direction) {
$footer.waypoint('remove');
$loading.toggle(true);
$.get($('.more').attr('href'), function(data) {
var $data = $(data.result[0]);
if($(data.result[0]).length==0){
$loading.toggle(false);
return false;
}
$('#items').append( $data ).masonry( 'appended', $data, true,
function(){
$footer.waypoint(opts);
});
$loading.toggle(false);
});
}, opts);