SEP 15 10

Endless scroller jQuery plugin

In a recent web project, I needed to build an automatic pagination for end-users, which automatically fetches more content when the user scrolls the page. Examples of this are the Facebook log and the shoe browsing on http://www.mirapodo.de/herrenschuhe/ (not affiliated with us). When the user gets to the end of the page, it fetches more content. This way, you don’t have to load more than neccesary on the first page load, and the user benefits, since she doesn’t have to click numbers in a pagination widget. The result is the jquery.esn.autobrowse.js jQuery plugin which does that for any page.

It loads JSON data from the server, and renders it client-side. One of the problems with a typical auto-pagination is that when the user clicks on a link in the content, and then clicks “back” in the browser, he or she ends up at the top of the page and have to scroll all the way down again (even Facebook suffers from this problem at the time of writing this 2010). In this plugin, you can choose to use the browser local storage to cache the content fetched, and it keeps track on how far you have scrolled on the page. This means that if the user clicks a link and then goes back, she will see what she left.

The browser cache is accomplished using the jStorage plugin (slightly modified for this autobrowse plugin). It presents a cross-browser interface for saving arbitrary data in the browser storage. The storage methods are different in different browsers however, so for instance IE doesn’t have as much storage space as Chrome or Firefox. The cache does fallback on an ajax request if the storage failed. The modified version of jStorage notifies the autobrowse plugin when the storage failed (i.e. when the data didn’t fit into the space available).

Try the demo and download. Report bugs or feature requests to me on GitHub or simply fork it!

by Micael Sjölund

http://www.richardbakker.com Richard Bakker

Does not work on iPad. I guess it does not detect the bottom of the window/client.
http://www.esn.me Micael Sjölund

Thanks for the feedback, I’ll look into it.
http://www.esn.me Micael Sjölund

This issue should now be fixed. I could reproduce it on an iPhone 4, and it works there now. The problem was $(window).height(), which didn’t return the correct value. This was reported as a bug in jQuery as well, so hopefully a fix will go into future versions of jQuery.

Thanks again for the heads up.
http://aboutwww.mirapodo.de huw

Mister sjolund,

I come from holland, i see your project for the site mirapodo.de.
That is a great site that you have release. Which plugin use you to rotate the image from all the shoes? Hopely you can me a reply.

Greetings,
Jac
http://www.esn.me Micael Sjölund

Jac: Sorry for any confusion, but we are not affiliated with the shoe store. It was a mere example of what we wanted to accomplish. I changed the text slightly to avoid any further misunderstanding.
http://www.cookielessdomain.com/blog/ Michael Pehl

This is pretty nice work, I think I will use it on a commercial site if you are ok with it.

We have about 100 containers with about 120px height so this can come in handy
http://www.esn.me Micael Sjölund

Michael: Thanks. No problem, use it however you like.
http://www.ganharnaloteria.info/wordpress/?p=9428 55 jQuery Super Poderosas de navegação eo menu Plugins

[...] 26. Autobrowse Endless Scroller [...]
http://abdie.web.id/04032011/55-super-powerful-jquery-navigation-and-menu-plugins/ 55 Super Powerful jQuery Navigation and Menu Plugins » abdie.web.id

[...] 26. Autobrowse Endless Scroller [...]
http://www.webrisorsa.info/30-jquery-navigation-slideshow-and-demo-with-free-download/966/ 30+ JQuery Navigation, Slideshow and Demo With Free Download | Inspiration

[...] 26. Autobrowse Endless Scroller [...]
http://digcms.com/2011/03/07/amazing-latest-jquery-navigation-menu-plugins/ 20 Amazing Latest jQuery Navigation and Menu Plugins | digcms

[...] 5. Autobrowse Endless Scroller [...]
http://alexishida.com/blog/?p=4401 55 Super Powerful jQuery Navigation and Menu Plugins

[...] 26. Autobrowse Endless Scroller [...]
http://www.tripwiremagazine.com/2011/03/40-jquery-menu-plugins-and-tutorials-for-better-navigation.html 40 jQuery Menu Plugins and Tutorials For Better Navigation – tripwire magazine

[...] 23. Autobrowse Endless Scroller [...]
http://wpmagazine.net/40-jquery-menu-plugins-and-tutorials-for-better-navigation/ 40 jQuery Menu Plugins and Tutorials For Better Navigation | Word Press Theme Magazine

[...] 23. Autobrowse Endless Scroller [...]
http://twitter.com/realwebdesigns realwebdesigns.com

cool stuff
http://webscriptplus.com/40-jquery-menu-plugins-and-tutorials-for-better-navigation/ 40 jQuery Menu Plugins and Tutorials For Better Navigation | WebScriptPlus.com

[...] 23. Autobrowse Endless Scroller [...]
http://webdesignuni.com/40-jquery-menu-plugins-and-tutorials-for-better-navigation/ 40 jQuery Menu Plugins and Tutorials For Better Navigation | Web Design Course Brisbane: Next Course Mon 18th Apr 2011

[...] 23. Autobrowse Endless Scroller [...]
http://www.wdesignlove.com/tutorials/most-powerful-jquery-navigation-and-menu-plugins Most Powerful jQuery Navigation and Menu Plugins | Welcome to W Design Love | Graphic and web design blog

[...] 26. Autobrowse Endless Scroller [...]
http://latenightstop.com/?p=674 Latest 20 Amazing jQuery Navigation and Menu Plugins

[...] 5. Autobrowse Endless Scroller [...]
Daniel

Nice tool, but why the pictures repeat after scrolling? The comes always the same block.
http://www.killurtime.com/2011/05/55-super-powerful-jquery-navigation-menu-plugins/ 55 Super Powerful jQuery Navigation and Menu Plugins | Kill your Time

[...] 26. Autobrowse Endless Scroller [...]
http://www.facebook.com/micael.sjolund Micael Sju00f6lund

The reason is simple: The Flickr API didn’t provide an offset in their nAPI, so the same pictures are fetched every call. But when you use your nown content, you will provide an offset parameter in the url, which willn make the plugin fetch new content every time.
http://www.paulund.co.uk/2011/05/endless-scroller-jquery-plugin-like-facebook/ Endless Scroller jQuery Plugin Like Facebook | CSS, PHP, jQuery and SEO by Paulund.co.uk

[...] JQuery Endless Scroller [...]
http://timgavin.name Tim Gavin

This looks like a really elegant solution! Unfortunately, I’m not a javascript guy. Do you have an example that fetches from mySQL and appends to a div?
http://colors7.com/css/20-awesome-latest-jquery-navigation-and-menu-plugins/ 20 Awesome Latest jQuery Navigation and Menu Plugins for All Developers | Web and Graphic Design Blog

[...] 5. Autobrowse Endless Scroller [...]
http://www.1stwebdesigner.com/design/jquery-navigation-plugins/ 55 jQuery Navigation and Menu Plugins

[...] 26. Autobrowse Endless Scroller [...]
Joelmsanto

Hi there,nnI installed esn autobrowser on my current project. I would like to call this plugin with a element that is updated from a AJAX using the load method: nn$(‘div’).click(function(){nu00a0u00a0u00a0 $(‘my_element’).load(‘file.php’);nu00a0 u00a0 $(‘my_element’).autobrowse({})n}I would appreciate if you are able to help me!
http://www.paulund.co.uk/endless-scroller-jquery-plugin-like-facebook Endless Scroller jQuery Plugin Like Facebook | Web Development Tutorials

[...] page therefore creating a larger page and more data, creating the look of an endless scrolling page.JQuery Endless Scroller Posted by: PaulEndless, jQuery, Plugin, Scroller Share The WealthDid you liked this post? [...]
http://nihad.nfiniti.net/2011/11/information-technology/wordpress/55-jquery-navigation-and-menu-plugins 55 jQuery Navigation and Menu Plugins-Nihad Nagi

[...] 26. Autobrowse Endless Scroller [...]
http://iwebask.com/blog/2011/11/21/85-ultimate-jquery-navigation-and-menu-plugins-for-web-developers/ 85 Ultimate jQuery Navigation and Menu Plugins for Web Developers

[...] and then finally we’ll achieve the same thing using the jQuery library.Demo : Visit Site44). Autobrowse Endless ScrollerIn a recent web project, I needed to build an automatic pagination for end-users, which [...]
http://www.webscriptplus.com/45-useful-jquery-menu-plugins-for-better-navigation/ 45 Useful jQuery Menu Plugins For Better Navigation | WebScriptPlus.com

[...] 45. Autobrowse Endless Scroller [...]
http://www.teknoupnews.com/tutor/2011/12/25/45-useful-jquery-menu-plugins-for-better-navigation/ 45 Useful jQuery Menu Plugins For Better Navigation | Teknoupnews.com Tutorial

[...] 45. Autobrowse Endless Scroller [...]
http://www.facebook.com/tadashi.kawabe Tadashi Kawabe

Hi, Nice too, but when the response result is 0, continued to call the response url. What should I do?
http://batusy.wordpress.com/2012/02/12/55-super-powerful-jquery-navigation-and-menu-plugins/ 55 Super Powerful jQuery Navigation and Menu Plugins « batusy

[...] 26. Autobrowse Endless Scroller [...]
http://www.webscriptplus.com/35-useful-jquery-menu-plugins/ 35+ Useful jQuery Menu Plugins | WebScriptPlus.com

[...] MORE INFO / DEMO (free jQuery plugin) [...]
http://www.merkezleri.org/useful-jquery-menu-plugins-35/ Useful jQuery Menu Plugins 35+ | Information Square

[...] MORE INFO / DEMO (free jQuery plugin) [...]
http://www.auralaser.info/2012/03/21/35-useful-jquery-menu-plugins/ 35+ Useful jQuery Menu Plugins | | Aura LaserAura Laser

[...] MORE INFO / DEMO (free jQuery plugin) [...]
http://news.howtoadmin.com/archives/21047 37个超级棒的 jQuery菜单插件 | IT News – 发布最新IT信息

[...] 35、无尽的自动浏览 [...]
http://1.kaiyuanshengshi.sinaapp.com/?p=2919 37个超级棒的 jQuery菜单插件

[...] 35、无尽的自动浏览 [...]
http://www.ostaste.com/uncategorized/6415 37个超级棒的 jQuery菜单插件 | 橙味网

[...] 　　35、无尽的自动浏览 [...]
http://www.ea163.com/archives/954 37个超级棒的 jQuery菜单插件 | 极地 EA163

[...] 35、无尽的自动浏览 [...]
http://xcodebox.com/thread-5893.html 35+ 超级棒的jQuery菜单插件 – CodeBox

[...] 35、无尽的自动浏览 [...]
http://www.openews.net/2012/37-superb-jquery-menu-plugin/ 37 superb jQuery menu plugin – Open News

[...] 35, the endless auto-surf [...]
http://web.366days.cn/wordpress/?p=1675 37个超级棒的 jQuery菜单插件 | 探索—不思

[...] 35、无尽的自动浏览 [...]
http://www.immarco.com/?p=67 37个jQuery菜单插件 « marco的博客

[...] 35、无尽的自动浏览 [...]
Hermant

thanks info like thisu00a0 http://karir.uni.me
http://webhelp101.com/2012/04/06/jquery-menu-plugins/ jQuery Menu Plugins | Web Help 101

[...] MORE INFO / DEMO (free jQuery plugin) [...]
http://dumaslab.com/2012/04/55-jquery-navigation-and-menu-plugins/ 55 jQuery Navigation and Menu Plugins | DumasLab

[...] 26. Autobrowse Endless Scroller [...]

Pushing the Web

by the people of ESN

Endless scroller jQuery plugin

Our open-source projects

Recent Posts