This plugin aims to progressively enhance your page. Your navigation/pagination elements should be present in the HTML for non-js users, but the plugin will utilize those links to build out a more rich browsing experience.
Download the jQuery plugin
Version 1.5.100504
jquery.infinitescroll.js and minified are now on GitHub
Usage
Minimum required configuration
This is the minimum amount of configuration you can do, if you want things to work:
// infinitescroll() is called on the element that surrounds // the items you will be loading more of $('#content').infinitescroll({ navSelector : "div.navigation", // selector for the paged navigation (it will be hidden) nextSelector : "div.navigation a:first", // selector for the NEXT link (to page 2) itemSelector : "#content div.post" // selector for all items you'll retrieve });
All options
// usage: // $(elem).infinitescroll(options,[callback]); // infinitescroll() is called on the element that surrounds // the items you will be loading more of $('#content').infinitescroll({ navSelector : "div.navigation", // selector for the paged navigation (it will be hidden) nextSelector : "div.navigation a:first", // selector for the NEXT link (to page 2) itemSelector : "#content div.post", // selector for all items you'll retrieve debug : true, // enable debug messaging ( to console.log ) loadingImg : "/img/loading.gif", // loading image. // default: "http://www.infinite-scroll.com/loading.gif" loadingText : "Loading new posts...", // text accompanying loading image // default: "<em>Loading the next set of posts...</em>" animate : true, // boolean, if the page will do an animated scroll when new content loads // default: false extraScrollPx: 50, // number of additonal pixels that the page will scroll // (in addition to the height of the loading div) // animate must be true for this to matter // default: 150 donetext : "I think we've hit the end, Jim" , // text displayed when all items have been retrieved // default: "<em>Congratulations, you've reached the end of the internet.</em>" bufferPx : 40, // increase this number if you want infscroll to fire quicker // (a high number means a user will not see the loading message) // new in 1.2 // default: 40 errorCallback: function(){}, // called when a requested page 404's or when there is no more content // new in 1.2 localMode : true // enable an overflow:auto box to have the same functionality // demo: http://paulirish.com/demo/infscr // instead of watching the entire window scrolling the element this plugin // was called on will be watched // new in 1.2 // default: false },function(arrayOfNewElems){ // optional callback when new content is successfully loaded in. // keyword `this` will refer to the new DOM content that was just added. // as of 1.5, `this` matches the element you called the plugin on (e.g. #content) // all the new elements that were found are passed in as an array });
Custom trigger, non-automatic. Twitter-style
In 1.4 you can trigger the loading of the next page of content at will. You’ll first unbind the default behavior. And then trigger the next pull whenever you like..
// unbind normal behavior. needs to occur after normal infinite scroll setup. $(window).unbind('.infscr');
// call this whenever you want to retrieve the next page of content // likely this would go in a click handler of some sort $(document).trigger('retrieve.infscr');
Demo of the triggered infinite scroll functionality.
How does it work?
There is a little known feature in the .load() method that lets you specify the CSS selector of the html you want to include. jQuery will load in any local URL, then parse the html and grab only the elements you’ve defined with your selector. This allows for some pretty fun shit: client-side transclusions (a la purple include) ; and some really kickass shit when you combo it with a local php proxy.
This is really the meat of the code:
// load all post divs from page 2 into an off-DOM div $('<div/>').load('/page/2/ #content div.post',function(){ $(this).appendTo('#content'); // once they're loaded, append them to our content area });
So it basically leverages that load() method at its core. It’s basically scraping your existing page structure, which means you don’t need to code any custom backend stuff to enable this functionality! Booyah, right?
Thanks, this blog aided me in solving some issues with the latest version, Why do they always seem to leave out vital information when they upgrade? It may be trivial to them but not for us! I’m sure i’m not alone either.
this is awesome!
just wondering if the callback will still happen if I call $(document).trigger(’retrieve.infscr’) because it doesn’t seem to — is this the same as @shamot’s problem
Can it work like Yahoo Mail (not like Google Reader)?
What I mean is — can it show the real height of the scrollbar before loading the content?
I’ve removed the fadeout animation from the Done Text.
However…
When I hit the end, go to another page and then go back– the Done Text has disappeard. Any ideas?
Just wondering, has anyone had any luck getting this working on an iPhone or iPad. I have it working fine in all computer browsers but just can’t get it working on the 2 Apple devices.
Before i spend time trying to fix it it just thought I see if it was even possible. Any pointers would be appreciated.
Thanks.
just wondering if the callback will still happen if I call $(document).trigger(’retrieve.infscr’) because it doesn’t seem to
i have code as follows but nothing happens …
$(function() {
$(”.posts”).infinitescroll({
navSelector: “#pageNav”,
nextSelector: “.next”,
itemSelector: “.posts .post”
});
});
…
…
…
1
2
3
4
5
on a side note, what happens if the HTML navigation only has the class .active on the active link, and i dont have a .next class?
I love this plugin and have implemented it on my latest project: http://www.icusawme.com
I would like to make the time that donetext is displayed longer. Is there a way to do this through configuration or do I have to dig into the library code?
You’ll have to dig into the the library code.
http://github.com/paulirish/infinite-scroll/blob/master/jquery.infinitescroll.js#L99
Change the 2000 to a bigger number. :)
G’luck!
Its almost too easy. I had the minified version, it was much harder to find the line there. Thanks Paul!
When uses the non-auto and click twice (like double click) returns:
["math:", 300, 871]
["heading into ajax", ["http://localhost/Transfer/Site/page/", "/"]]
GET http://localhost/Transfer/Site/page/2/ | 200 OK | 438ms
["heading into ajax", ["http://localhost/Transfer/Site/page/", "/"]]
GET http://localhost/Transfer/Site/page/3/ | 200 OK | 385ms
["Page not found. Self-destructing..."]
good site!
Hi,
I am loading images by making FLickr API call and populating images in div named Flickr_Container(using PHP), The number of images uploaded have exceeded my expectation and now I want to use infinite scroll for displaying images. Basically on page load I like to display 90 images and then as user scrolls down, I like to display next 90 and so on till we reach at the end. Can you help me in implementing infinite scroll for my purpose.
Thanks a lot
<a href=”" rel=’lightbox’><img src=”" width=”75″ height=”75″ />
Hi,
I am loading images by making FLickr API call and populating images in div named Flickr_Container, The number of images uploaded have exceeded my expectation and now I want to use infinite scroll for displaying images. Basically on page load I like to display 90 images and then as user scrolls down, I like to display next 90 and so on till we reach at the end. Can someone help me in implementing infinite scroll for my purpose
<a href=”" rel=’lightbox’><img src=”" width=”75″ height=”75″ />
Success usually comes to those who are too busy to be looking for it- Henry David Thoreau (1817-1862)
Hi Paul - thank you so much for an incredible script -
I just wish I could get it to work.
I am trying to get it to work with Masonry on an Expression Engine site (which is using Structure - so it is generating URLs that go page=2 page=3 etc - so I don’t think this is the same issue that Matt Jones had above).
The site build can be seen here:
http://printclublondon.com/alpha/index.php/news
I think i’ve got everything wrapped up correctly - but it isn’t picking up the IR script… if you are able to cast your eye over it and let me know if anything jumps out that would be incredible -
All the best
James
Thanks for the email Paul - works a treat now -
In case anyone else has the same issue - I hadn’t named the hooks for the script correctly - which paul pointed out that (in my case - because of the way expression engine with structure spits out the pagination link) should be:
navSelector is .pagination
nextSelector is .next a
Thank you -
James
Hi, I want to let all of you bloggers / web users recognize about a fresh Search Engine called Braxea. Its pretty dam cool… It combines Google, Bing and Yahoo into one plus lets you search for videos on YouTube and News throughout the net. Maybe this will become the new Google ?
Hey, i have a problem, my paging system is /page/2 to /page/40/ and it doesn’t seem to work. Every page should give another 5 entries, but it just displayes the first page entries and when i scroll to the bottom of those 5 entries it will say “Congratulations, you’ve reached the end of the internet.”
Do you know what might be the problem? I’m figuring it’s my side…
curious why at the end of the scroll it loads a ton of 404s? Is there something I can do to stop that? Saw a note about “my theme” not being capable. but then there’s no note on how TO make it capable.
Thanks.
This works great - sometimes your nav is inside the content div so just add a around your next and previous in your php. Works flawlessly!