Release: [jQuery Plugin] Endless Scroll
Posted by Fred Wu
Latest release: v1.3
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");
}
});
Demo
Changelog
v1.3 [2009-04-20]
- Fixed a bug caused by ‘fireDelay‘.
v1.2 [2009-01-16]
- Added ‘resetCounter‘ option.
v1.1 [2009-01-15]
- Added ‘fireDelay‘ option.
v1.0 [2009-01-15]
- Initial release.
Thanks for the plugin.
Was looking for similar feature.
Thanks again.
Sounds good, any chance of a working demo or two? :-)
Awesome. I did something like this a while back ago. Yours is probably a hell of a lot better. =)
Demo?
I’ve now updated the post to include a simple demo link. :)
Looks great! I’m sure I’ll be able to put this to use. Thanks for the great work!
cool plugin. I had an attempt to do that. But did not finish that time. But nice to see that.
I was wondering if this will for for example if i want to have the user jump to a certain row – for example in your Demo, can you give the user the option to load the page from “Added text 260″ – or any number they like?
@Sami, yes you can use the fireSequence argument in the callback function for that.
Hi Fred, thanks for the script. Which all browsers have you tested the script with or are you aware of any cross browser issues?
@Piyush, the script has been tested on Firefox 3, Safari 3/4, IE 7 and Chrome. It should work on all major browsers, if not please let me know.
uhm..the demo does not seem to work here on Safari and FF.. just normal static text lines..
[Edit]: ups, sorry, thought this was about a carousel :P works properly then..
I’m trying to use this with jQuery tabs and have ran into a problem. I try to define which element should trigger endlesscroll, but it seems that only “document” works. For example, I have several tabs and want a different scroll working for each one of them. Any ideas on how to do this?
Demo link appears to be broken? I’m getting a 404 when i go there.
it works fine for me
This plugin is awesome. Thank you for sharing!
How can I keep this from being fired multiple times right in a row? I thought fireDelay set to say, one or two seconds (1000 / 2000 ms) would prevent this but it seems to ignore the fireDelay integer all together. There are times when it will fire back to back very quickly with no delay.
Try increase the fireDelay time, if you’re still having this problem, please post your OS and browser versions.
Thanks for such a speedy reply. I changed the number
I’m running Mac OS X 10.5.8 running Firefox 3.5.2.
For what it’s worth, here’s my code: http://pastebin.com/f119a26d9
I’ve tried the integer using quotes and no quotes. I’m fetching a set of records and setting the start number based on the amount of articles present. To begin with there are 15 articles, so the first scroll will return the start number of 15. But, if you scroll aggressively it’s possible to fire off two of those calls consecutively.
How can i apply this to a table?
Can I modify this to run the scroll horizontally instead of vertically? I’m new to jQuery, so apologize if the answer shoudl be self-evident.
I haven’t tested horizontal scrolling, but I think with proper modification, it should run fine.
Yeah, Fred, see that’s my problem: I’m not sure what or how to modify it. I’m not sure that simply changing “bottom” and ‘Top’ references to ‘left’ and ‘right’ references will work. Any ideas?
Hi,
Could you explain to me what the P variable in the function does? I am trying to get the content loaded by AJAX but I am not sure how to keep track of what content that has been loaded?
@Joakim:
Callback function, accepts one argument: fire sequence (the number of times the event triggered during the current page session)
Can you give an example of how to use ceaseFire? How do I turn off scrolling once the callback function returns no new entries? Thanks. Nice plugin.
It’s not endless if you grab scroll bar and slide it to the end.
I had success in modifying the plugin to work with a given scrollable container and a child content element instead of window and document. The default object sets these to window and document but other elements can be set as options when calling endlessscroll().
I was a bit surprised the plugin didn’t already do this. Any reason why not?
@Peter: The repository for the Endless Scroll is on Github, would you be able to submit a patch or fork the project and send a pull request?