The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
Endless Scroll
If you don't already know, endless scroll (or infinite scrolling) is a popular technique among web 2.0 sites such as Google Reader and Live Image Search, where instead of paging through items using the traditional pagination technique, the page just keeps loading with new items attached to the end.
I have developed a jQuery plugin to easily achieve this.
Requirement: jQuery 1.2+
The plugin is tested with jQuery 1.2.6 and 1.3.
There are a few options to customise the behaviour of this plugin:
- bottomPixels (integer) - the number of pixels from the bottom of the page that triggers the event
- fireOnce (boolean) - only fire once until the execution of the current event is completed
- fireDelay (integer) - delay the subsequent firing, in milliseconds. 0 or false to disable delay.
- loader (string) - HTML loader
- data (string) - plain HTML data
- insertAfter (string) - jQuery selector syntax: where to put the loader as well as the plain HTML data
- callback (function) - callback function, accepets one argument: fire sequence (the number of times the event triggered during the current page session)
- resetCounter (function) - resets the fire sequence counter if the function returns true, this function could also perform hook actions since it is applied at the start of the event
In a typical scenario, you won't be using the 'data' option, but rather the 'callback' option. You may use it to trigger an AJAX call and updates/inserts your page content.
Usage
// using default options
$(document).endlessScroll();
// using some custom options
$(document).endlessScroll({
fireOnce: false,
fireDelay: false,
loader: "<div class=\"loading\"><div>",
callback: function(p){
alert("test");
}
});