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.4.100210
jquery.infinitescroll.js (9.1k)
jquery.infinitescroll.min.js (3.6k)
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(){ // optional callback when new content is successfully loaded in. // keyword 'this' will refer to the new DOM content that was just added. });
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?
I love this plugin and am using it on my site, but have found two bugs in it. I’m not asking for them to be fixed, but thought you might like to know:
1. Chokes with XHTML pages that are served as application/xhtml+xml. Appears to be something to do with using methods that inject HTML, rather than using DOM manipulation.
2. Wont work on pages that have another “2″ in the URL, such as “/2008/01/page/2/”.
If I ever get round to fixing them myself, I’ll let you know…
Ah. good catches, Chris.
I think we’re stuck with text/html for the first.
For the second,
we can replace:
with:
Love your plugin, hope to implement it on the next version of a bigger Danish community site.
Right now the plugin loads the next page on page load rather than me scrolling to the bottom. How do I control this?
It can be seen at http:/lyf.dk/t/inf
Thanks!
[...] 2: The frontend, uses Infinite scroll to create a single page of user profiles, there is also a ajax rating [...]
I’m working on an Expression Engine site and the URLs that are produced for pagination look a little something like this
http://www.example.com/index.php/template_group/template/P5
The URL I want to put the infinste scroll on would be
http://www.example.com/index.php/template_group/template
P5 in the URL indicates the next the first post to display on that page.
So posts 0-4 are showing on the main template page, P5 will then show posts 5-9, P10 will show 10-14 and so on.
Is there anyway to adapt the regex to look for P# in the “next page” anchor href. And then for any subsequent pages add # to the previous P#.
I hope that makes sense.
Matt,
so page 2 is /P5
and page 3 is /P10 right?
You could certainly modify the regex by hand, the 2 with a 5 in the regexes.
And then there’s a +1 later (or ++) to increment the counter.. could just up that to += 5
That is the best fix I can offer at the moment. :/
awesome:)
[...] down. There is an excellent jQuery plugin that makes this very easy to do that can be found at http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/. It also has great documentation and support. But being new to jQuery, it took awhile [...]
[...] Category Uncategorized Pallla There are a few new features in the 1.2 release of the jQuery plugin I’ll [...]
Oskar: it’s because the nav is at the top of the page. It should be located at the bottom, after the #content div.
I also emailed you privately. I apologize for the delay.
Do you think it could be implemented to go upwards? Because I tried a similar -though less sophisticated- approach to do it but I can’t seem to get it work properly : scrollbar won’t expand upwards when I reach the top.
Paul - I have attempted to add the IS coding to a wordpress blog using grid-a-licious according to the tutorial you provided on the unofficial grid page, but have been unsuccessful. Would you mind taking a look at http://www.defrez.com/blog and let me know if you see any mistakes in my coding? You can email me privately - thanks!
yay. we fixed it. :)
[...] just released version 1.4 of the jQuery Infinite Scroll plugin. Along with that comes a new release of the wordpres plugin. A few small bugs were fixed in the [...]
[...] Infinite Scroll jQuery Plugin « Infinite Scroll | jQuery plugin, Wordpress plugin, interaction… – [...]
Very nice… but I have 1 problem ~ request…
I’m scrolling on table contents, which means that a master DIV has the “overflow:auto” (ie localMode:true), but the loading content (TABLE TRs) should be appended to the contained TABLE TBODY element.
<— infinitescroll
…content…
…content…
… INSERT HERE ….
Could you differentiate on where scroll binding are done and content are added?
Can I somehow refresh the other jquery’s when new content is loaded?
Since I have this in every post
jQuery(document).ready(function(){
$(’.tothetop’).click(function(){
$(’html, body’).animate({scrollTop:0}, ’slow’);
});
});
Poosk, you have two solutions there.. One.. in the callback you can rerun that click binding with the new context:
or.. you can just change it to a live binding and it’ll all work with new content.
oh wow thank you!!!
can anyone help me get this to work with a stock tumblr template? i’ve installed the plugin & added the code here:
http://bagcheck.net
but still can’t figure out how to refer to the “next page” in the template.
I’m implementing this on a Tumblr blog, which doesn’t provide a method to specify image dimensions inline. Currently, I’m repositioning the returned elements within InfScr’s callback but I’m having trouble with images that haven’t fully loaded. I have tried a simple animate() delay, but that’s only a partial fix. I would prefer a method to tell when all returned content has finished loading, but I’m guessing the .load() call that InfScr is built upon wouldn’t appreciate a second load() within its own callback.
Any ideas?
Hi,
Is there an easy way to prevent this from wrapping the newly-loaded items in a DIV? In my case, I’m adding more LI elements to a UL, so that extra DIV is messing up the layout. Also, UL > DIV is not valid.
Thanks.
Hi,
Am using infscroll i have it working with a custom scroll bar jscrollpane and am happy with it. However I have a slight issue which is my page links are Ajax.ActionLinks which should do a post when clicked but i find that its hitting the Get Action in .net MVC 1.0. This is fine but i find that when other elements on the page do a post to refresh the contents of the page, including the pager, the infinite scroll still returns items based on the initial pager links when the page was first loaded.
to further clarify if my inital pager links are /Index.aspx/1/ /Index.aspx/2/ etc…
then an ajax post changes the pagers so it says /Index.aspx/1/?search=”a’ /Index.aspx/2/?search=”a”
then infscroll still uses /Index/aspx/1/ … when scrolling down the page, i have tried reinitialising the infscroll javascript on each ajax post but this had no effect
Hi,
Edit on my last post. When i reinitialse infscroll aftert the ajax post then i do see the new links getting called however i am getting multible calls to get the data, 1 call for each time i reinitialise infscroll. is the a way to uninitialise infscroll to then reinitialise with the latest link values after a post.
Thanks
Evan
I’m using jQuery Masonry and your infinite scroll plugin and I want to be able to dynamically change the content being displayed without having to refresh the page and have masonry and infinite scroll re-configure themselves for the new content, but I’m having a hard time getting that to work properly. It seems that once infinite scrolling is initialized, it can’t be removed and simply gets turned off when you reach the end of the content.
When I replace the content with new content (not appended content) the only way I’ve been able to get Masonry to work is if I remove the div it was initialized on completely and run it again. That’s fine, except that I also need to be able to re-initialize infinite scrolling with a fresh pagination url (set at page 2 again). I didn’t see any explicit ways of doing this in your code, but maybe you know of a simple way to pull it off?
Love the plugin, btw, I can’t wait to get my new site online.
Hi, Thanks for a great plugin!
I don’t want to be a douche bag but there is an error in the all options example:
After
itemSelector : “#content div.post”
there is a missing (” , “).
Really minor, but someone might not see this and get frustrated because it’s not working if he or she just copied everything.
Thanks again,
Fred
@Fred,
Thanks, douche. Just kidding; Appreciated and fixed. :)
hi there,
Searching for “2″ on next pager url is a bit restrictive, specially for pagers that assume that current page is page 0 (like in drupal). a great module though :)
Any solution for hoverIntent plugin?
http://cherne.net/brian/resources/jquery.hoverIntent.html
Just run your hoverIntent call again in the callback
but change it to like
$('a.things',this).hoverIntent(......It works, thank you.
Is it possible to auto-hide that “more” button before last page? I think its better instead displaying a message like “You reached the end of the internet”.
i can not get this plugin to work :(
my theme is adapted from the clear theme and i have checked that all the divs are named the right thing. Even when I activate the classic theme it does not work.
Can someone explain how I am getting this so wrong? http://annarosekerr.com
Thank you!
Can this be enabled for blogger blogs ?
hi there, first of all - great plugin
i have a suggestion though - you could give the user an option to explicitly define the path
the determinePath method would fire only if there was no path provided
its like Remon says, the page=2 thing is not ideal, this could help
Love the plugin !
See it in action at http://themobilediary.com/
Because your example links are broken.