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);
Related
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 load content (from a php file that get lists from database) to a div. It has a 10 seconds loop. So on every 10 seconds, it checks the file and load content to div to show new lists if added. However, on every run, the div content flashes (appear and disappear). It seems so unprofessional.
setInterval(function(){
$("#messageshere").empty();
$("#messageshere").load("msgs.php");
}, 10000);
My question is, is there smarter way for doing the same thing, but without flashing ?
Use a callback to show your message and empty your div only when you have your response. like this:
$('#messageshere').load('msgs.php', function(data) {
$(this).empty() // also unnecessary
$(this).html(data);
});
I'm working on a project using the jquery-scroll-pagination plugin to dynamic load additional content when scrolling: https://github.com/andferminiano/jquery-scroll-pagination
The idea is to facilitate the user with different views. This is currently being done by using the jquery load event in a way that when an user clicks a button the content will be loaded.
The problem I'm facing is that the "scrollPagination" functions remains in memory and being active on #content. If an user clicks away the view and switches back, the scrollPagination for #content is loaded a second time. All calls are executed twice then.
Is there a way to prevent the scrollPagination function being active multiple times?
function loadscrollPagination() {
setTimeout(function() {
$('#content').scrollPagination({
nop: 10, // The number of posts per scroll to be loaded
offset: 0, // Initial offset, begins at 0 in this case
error: 'No More Posts!', // When the user reaches the end this is the message that is
delay: 500, // When you scroll down the posts will load after a delayed amount of time.
scroll: true // The main bit, if set to false posts will not load as the user scrolls.
});
}, 100);
}
$("div.detail").click(function() {
$('section').load('detailed-view.php', function() {
loadscrollPagination();
});
});
Perhaps jQuery.one() will do the trick:
#('section').one('load', 'detailed-view.php', function() {...})
See here for more info: http://api.jquery.com/one/
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 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
}