infiniScroll jQuery plugin released! infiniScroll jQuery plugin released!

by: Mark Holton created almost 4 years ago

infiniScroll 0.1 Released!

Can view a DEMO on my home page where I load my blog posts.

the source: infiniScroll on GitHub https://github.com/holtonma/infini_scroll
the DEMO: http://MarkHolton.com
the jQuery plugin page: http://plugins.jquery.com/project/infiniScroll
the GoogleGroup: http://groups.google.com/group/infiniscroll

I wanted to enable infinite scrolling in a few places: on my blog, on some sites I work on with a ‘leaderboard’, on portfolios — anything with a long list. Pagination works in many cases but I find it nice front end optimization to render a small number of results immediately, and then render more results as the user needs them. This front end usability pattern seen on Twitter.com, Facebook.com statuses, 37Signals’ Sortfolio (and MarkHolton.com home page now!). Wanted to abstract away most of the code to enable easier re-use!

Your server side code will need:

example routes.rb route (gist):

the JS in the local checkLevel() method passes the “max id” and “num rows to retrieve” as “id” and “n”, respectively. So your server side code will need to respond to the root url you set with those parameters to work properly:
settings.root_url+"?id=“settings.freshest_id”&n="+settings.num,

example posts_controller.rb method (gist):

example rendered partial from XHR request (gist):

once you have that, and include infiniScroll.js, the markup in the page and the JS call (gist):

disclaimer: there are some more items I need update to make it friendlier to use with the URL and grabbing the lastID from the DOM after it came from the server — it’s just 0.1, but the basics are there if you want to check it out. See the README on the githubz page, take a look at the source, and let me know if you have any questions.

Enjoy!

Comments

blog comments powered by Disqus