Load more function in Javascript

EDIT: This question was initially too general, I think. So What I really need is a very good tutorial on how to implement the Load More function on Safari for iPhone just like the Twitter website(mobile.twitter.com) does. Just a wordpress plugin won’t really help. But if the plugin is well explained, like if it is wptouch, home(that …

via iPhone Developers Faqs » Search Results » ajax:

Load more function in Javascript

EDIT: This question was initially too general, I think. So What I really need is a very good tutorial on how to implement the Load More function on Safari for iPhone just like the Twitter website(mobile.twitter.com) does. Just a wordpress plugin won’t really help. But if the plugin is well explained, like if it is wptouch, home(that also has this function) that can also do.
I know that it doesn’t really matter that it is being displayed on a mobile device, but the point I am stressing is that if such a function is well explained, then it will be up to me to know how to customize it to suit me.
I am using a javascript function to load entries that come from the database dynamically, so that content opens in the same page (like with twitter(tweets feed) and facebook(news feed)).
The php/html version(That opens a page in a new tab) is
echo ‘Load more entries› ‘;The javascript/ajax version:

” class=”spin” src=”/images/main-ajax-loader.gif” style=”display:none” alt=”” />


We will need to keep track of the following 2 items:
Items/Pages loaded so far.
How far are we from the bottom of the page.
The code references are in MooTools, but the concept is the same. Converting it to jQuery is a trivial task once you understand it.
var maxPage = 1;
var threshold = 100;We need to know whenever the page scrolls, so add a handler for scroll events. Find the scroll distance to the bottom of the page. If it’s less than the defined threshold (100px), then fire off an AJAX request loading the next page. When the response comes (if successful), append it to the page and increment maxPage number.
Another thing to keep in mind is to only fire an AJAX request if content is not already being loaded. Have a flag that indicates whether the page request is still pending.
var isLoading = false;
window.addEvent(‘scroll’, function()
// the height of the entire content (including overflow)
var contentHeight = window.getScrollSize().y;
// current scroll is height of content that’s above the viewport plus
// height of the viewport.
var contentScrolled = window.getScroll().y + window.getSize().y;
var distanceToBottom = contentHeight – contentScrolled;
var closeToBottomOfPage = distanceToBottom < threshold;
var shouldLoadMoreContent = !isLoading && closeToBottomOfPage;

if(shouldLoadMoreContent)
// create an ajax request
var request = new Request(
url: ‘http://www.example.com/more’,
onSuccess: function(responseText)
$(‘page’).append(responseText);
maxPage++;
,
onRequest: function()
isLoading = true;
,
onComplete: function()
isLoading = false;

});
// fire off ajax request with the page # as a querystring param
request.send(page: maxPage);
}
}
……………………………………

Commonly called an Infinite scroll. There are plugins for jQuery and WordPress:
http://www.infinite-scroll.com/

For more info: Load more function in Javascript

iPhone Developers Faqs » Search Results » ajax

Load more function in Javascript

Share this post:

Related Posts

Leave a Comment