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 [...]

  • http://code-maniac.host.org/35-useful-jquery-menu-plugins-2/ 35+ Useful jQuery Menu Plugins | codeManiac – Snippets, Templates, API and the best developer content

    [...] MORE INFO / DEMO (free jQuery plugin) [...]

  • Orejwan

    Hi Micael,

    Great code, very easily integrated but I do have one question though; I’m trying to use your code to fetch news items into a DIV element but your code does not seems to be able to support DIVs (with scrollbars, using the overflow: auto CSS attribute) . I did find another solution that does supports DIVs but I liked your better since it also uses the jstorage script, so I would really appreciate it if you could instruct me on how to use your code on scrollable DIVs.

    Thanks!!

  • http://ohashi.coolblog.jp/?p=158 WEB Link » Archive » 今どきのWEBサイト構築のためにオススメのJQueryプラグイン4選

    [...] 最近にわかに流行っているPintarestなどのUIに使われている、下にスクロールしていくと自動でページを読み込んでくれるというプラグイン。縦方向へのエンドレススクロールなので、画像を配置したりするとよさそう。デモ・ダウンロードはこちら [...]

  • http://sky54.cn/?p=68 37个超级有用的 jQuery菜单插件 | 天空实验室

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

  • http://1.liangyiblog.sinaapp.com/?p=385 37个超级棒的 jQuery菜单插件 | 两仪博客

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

  • Frank

    Nice plugin, however I can’t able to use it. All images are loaded at the same time if i don’t scroll the page i can see they increase, according to the “max” parameters, and if i set max to 10 i can always see more images fetched. I don’t know why..i’ve added all the js, storage and json also.

  • SonborjDavaoPhil

    This worked for me in an ASP MVC3 project. You might need to note that the offset property is being automatically set, no extra javascript coding. You need to add the offset parameter though in your GET url , then handle that parameter in your server side code.

    client side code
     $(“#searchresults”).autobrowse(
        {
            url: function (offset) {
                return “/Home/SearchJson/?SearchText=” + SearchText + “&Offset=” + offset ;
            },
            template: function (response) {
                var markup = ”;
                for (var i = 0; i < response.length; i++) {
                    markup += '’;
                    markup += ‘‘;
                    markup += ” + response[i].Name + ”;
                    markup += ” + response[i].Brand + ”;
                    markup += ‘£’ + response[i].Price + ”;
                };
                return markup;
            },
            itemsReturned: function (response) { return response.length; },
            offset:0,
            max: 200,
            loader: ”,
            useCache: false,
            expiration: 1       
        }

    server side code
     public JsonResult SearchJson(string SearchText,int Offset)
            {
                SearchInfo si = BuildSearch(SearchText,Offset);
                return Json(si.SearchResult,JsonRequestBehavior.AllowGet);
            }

     private static SearchInfo BuildSearch(string SearchText,int Offset)
    {
    .
    .
    .
         foreach (var item in results.Skip(Offset).Take(ResultBatchCount))
         {
          }
    }

    ====================================
    Note the offset being used in getting the right batch of results from your list. really just the same as pagination.

    ResultBatchCount is a variable or constant you want to set on how many items you want to spit out at every call

    by the way,  GREAT WORK to author

  • http://www.freewebstock.com/2012/10/27/146/35-useful-jquery-menu-plugins/ 35+ Useful jQuery Menu Plugins

    [...] MORE INFO / DEMO (free jQuery plugin) [...]

  • http://www.tripwiremagazine.com/2012/09/jquery-menu-plugins.html 35+ Useful jQuery Menu Plugins

    [...] of the element. The content is fetched via ajax, and the plugin keeps a cache using local storage.MORE INFO / DEMO (free jQuery plugin)38. LavalampLavalamp is a simple, ready to use JQuery plugin which allow [...]

  • arul ananth

    my url:ajax.php

    my postData:”page=2″

    my ajax.php file
    <?php

    $url=$_REQUEST['page'];

    echo "”;

    ?>
    i want call this page total of my website registered user.

    any 1 help me how i call the autobrowse plugin and any changes in plugin files.

  • http://www.facebook.com/arulananth140488 Arul Ananth

    my url:ajax.php
    my postData:”page=2″
    my ajax.php file”;
    ?>i want call this page total of my website registered user.
    any 1 help me how i call the autobrowse plugin and any changes in plugin file

  • rei

    Can you show how to do this with wordpress?

blog comments powered by Disqus