Release: [jQuery Plugin] Endless Scroll
Posted by Fred Wu
Please check the GitHub repository for the latest release.
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, 1.3 and 1.4.
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.4.2 [2011-01-08]
- Fixed a bug where calling the script on $(document) would fail.
v1.4.1 [2010-06-18]
- Fixed a bug where the callback fires when the inner wrap hasn’t been created.
v1.4 [2010-06-18]
- Endless Scroll now works with any elements, not just $(document)!
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?
with jquery 1.4.2
Node cannot be inserted at the specified point in the hierarchy” code: “3
any idea?
Does not works with jQuery 1.4.2!
Hi,
Great plugin, but like other people I can’t get it to work with 1.4.2.
Will there ever be an update for this script or is it better to look for another one?
Thanks in advance.
Just a quick update – yes I will be updating the script to work under jQuery 1.4. It’s the holiday seasons and all so it might take a bit longer.
I’ve released a new version that should fix the issue, please download it from the Github repo: https://github.com/fredwu/jquery-endless-scroll/downloads.
Hey, really appreciate the work you did on this plugin. Cheers!
Hi,
I currently use page pagination on my website and love what you have created and offer to share with everyone.
How easy if this to implement when results are taken from a mysql database?
Currently i use a pagination script that shows 10 rows per page but like the idea you have and was wondering if you could give us some clues, advice or example about implementing it with results coming from a db.
Thanks
In regards to the “Node cannot be inserted at the specified point in the hierarchy” code: “3″ error, which I was also getting with jQuery 1.5.2 – it seemed like the endless plugin was essentially trying to wrap the document itself in a which isn’t allowed (as of jquery 1.5.2 at least). I fixed the issue by putting everything inside the in a .
@Mathew: Please use jQuery’s .get() method (or .ajax() method) for retrieving db results: http://api.jquery.com/jQuery.get/
@Lee: Yes you are right, the latest version can be used on any DOM objects so please avoid using it on $(document) directly. :)
Hi, it seems that only “document” works. Any idea?
Hi, it seems that only “document” works. Any idea
It seems that using it with combination with jmobile does not work. The 1.3 versions works just on the initial screen, if you follow a link and put it endlessScroll there it doesn’t. Any feedback? Thanks ;)
Thanks for endlessscrolling.! Is there a way to remove the plugin after a partial postback? I am toggling between 2 usercontrols one have the endless scrolling the other a form. when i switch to the form the plugin is still attached to the document and give errors….
@Manuel, you could try binding endless scroll to a DOM rather than to the document?
Hi, I think that endlessscrolling needs an element with a fixed height to do the magic, is that right? If so my issue is that the DOM element I am adding my data expands vertically as data come in so i could not attach endlessscroll to it…. My issue now is that on the other usercontrol i need to attach endlessscroll to another callback function….. how could i switch the call to another callback function? thanks for the quick reply, it works its magic pretty good
@Manuel, yes the DOM needs to have a fixed height. I don’t quite understand your other question though – do you mean you only want to ‘activate’ endless scroll via a callback from some other events? If it’s a DOM inserted by an AJAX call, you need to use either jQuery’s `live` or `delegate` to attach the endless scroll event to the DOM.
Hi, I have 2 usercontrols, each one is pulling different data from 2 different tables. So I need to switch the callback function to a different one when i toggle between the 2 usercontrols. first user control does
$(document).endlessScroll({
fireOnce: true,
callback: function (p) {
GetPagedPost();
}
});
then second user controls does
$(document).endlessScroll({
fireOnce: true,
callback: function (p) {
GetPagedData();
}
});
each one calls a different callback function. how can i swap or recreate endless scroll with different parameters? thanks
Hi, any ideas on how could i call endless with a given callback function and later when i switch to the other user control call endless with another callback function? My challenge is that it will be attached to $(document)..Any way to call remove() so that i could attach it again?
how would you attach endless scroll with “live” from jquery?
Or what event would you use to attach with bind()?? thanks
Have a look at jQuery’s API. For example:
$('#your_trigger_dom').live('click', function() {$('#your_endless_scroll_dom').endlessScroll();
});
You might want to create and bind a custom event if it’s not one of the common ones such as `click`.
Thanks, no this bind() does not help me. Is there a way to programmaticaly swap the callback function? could this be implemented if it doesn’t?
Hi Fred,
could i modified your source code?
Yes absolutely, feel free to take the source code and modify it. :)
Hi Fred,
The plugin is not workingon IE9..could you help find why? thanks
Hi Fred,
is there a way to get this working on the iPhone/iPad?
Hi,
could you PLEASE give an example of how to use ceaseFire?
THANK YOU
Hi, Any update for IE9 compatibility?
it doesn’t work in IE8
I get ‘console’ is undefined error
Firefox OK but doesn’t start at 21 when scrolled, it resets to 1 (i.e. goes 19,20, 1,2,3,4 etc.)
This happens with my local machine (using files from the zip download) and your online demo
Have you not tested this?
not sure if you got my post….
IT DOESN’T WORK (online demo or downloaded file) in IE8 and sporadically in Firefox
@BEN in IE8 you should use $(window).scroller(); as the scroll event is not supported on document object….
Hi Fred,
Thanks for the plugin. I am able to use the plugin and get most of my work done. I have a novice question. As of now I am able to get the content loaded using ajax when scrolled in either directions. But, i wish to have the endlessScroll working only when i scroll in the ‘down’ direction. How could i avoid endlessScroll behaviour when scrolled in the ‘up’ direction.
@San, there might be a bug in the latest version, but if you don’t set `pagesToKeep` it should ignore upscrolling. If this doesn’t work, try version 1.6.0.
@Fred, Thanks for the response. I am using v1.8.0 so i guess the bug you are referring to should be addressed in v1.8.0. I am not setting ‘pagesToKeep’. I could also notice the same behavior (loading content in ‘up’ direction) with the demo you provided. Anyhow I would try with v1.6.0 and let you know the results. Thanks
@Fred, Can you please provide me the link to download v1.6.0. I could see the latest version and previous change logs but not a complete source file of v1.6.0
@San: Here you go https://github.com/fredwu/jquery-endless-scroll/tags
How do you make it so that endless scroll continues calling? Mine only loads the callback once and then I can reach the end of the page :(
This is what I have:
jQuery(“#content”).endlessScroll({
insertAfter: “.activityLogBox:last”,
callback: function(p){
console.log(p)
jQuery.post(“temp/check_log?last=” + jQuery(“.activityLogBox:last”).attr(“id”),
function(data){
if (data != “”) {
jQuery(“.activityLogBox:last”).after(data);
}
});
}
})