Thursday, November 9th, 2006

Endless Pageless: Keep scrolling for more content

Category: Articles, Examples, Prototype

<p>Pete Forde has taken the Pageless implementation seen in the Humanized Reader, implement it with Prototype, and write this piece on it.

They implemented the feature on their Live Filter demo, so now as you scroll down you see more results coming back at you automatically. No next, previous, or Gooooooooooooooooooogle (for SEO you will want a solution so the crawlers can find the content via deep linking).

Implementation

The key to creating your own Pageless is to always know how far into the page a user has read. We create event handlers that trigger an Ajax request if the user comes within an adjustable distance from the bottom of the screen. Using the setTimeout function built into JavaScript, we can create a very responsive control loop that scans the current browser scrollTop attribute at tight intervals. By setting the onmousedown and onmouseup we prevent any sudden, unwelcome screen jerking.

As we move down the screen we save our current location to a temporary cookie, which allows us to resume our place on the page if we return to the results using the browser’s Back button. The trick is to define an empty, invisible DIV element which is programatically moved down the page to your previous location at page load. It acts like a magical cursor, triggering all necessary content loading as it scrolls down the page. After a brief delay, the page state has been restored without breaking the Back button.

On the server we set up a function to respond to the Ajax calls for more pages of content. It will need to accept the required page as a parameter, and it should pass the corresponding rendered HTML snippet back to the client, at which point you will append it to the bottom of the content already rendered. Thankfully, implementation of the innerHTML attribute is consistent across all major browsers.

Most of the logic for making this work is performed on the client side. The good news for you is that all of the hard work has been done for you; go ahead and use search.js in your projects! We make use of the Prototype JavaScript library that is a part of Rails, but it could be modified to use another Ajax library, if necessary.

On the results page you must render values into several hidden INPUT elements: history_index, total_pages, and page_id. history_index will start off empty, and get modified by the client script. total_pages needs to be the total number of pages that the user’s query could theoretically return at n records per page. Rails gives us this number automatically when we perform a paginated find call. Finally, history_index is just a unique number; we fill it with the number of milliseconds since 1970. There are also several DIVs, initially hidden, which you will modify to suit your application.

One caveat is that you need to make sure your server side function returns a signal to the client if no records are found. The way that the Ajax class in prototype works, you will need to receive at least one character for it to be properly handled.

We are seeing this pattern more and more, such as on the mobile with the latest Gmail Mobile application that was just released.

Related Content:

20 Comments »

Comments feed TrackBack URI

nice, although it has one bug:
(Win+IE) grab the scroller using mouse, scroll down to the bottom, and release the mouse outside the active window – page doesn’t add more content:( You have to release the scroll (click) in the window.

Comment by Lukasz — November 9, 2006

Nice! I love this concept. It is getting prevalent. Bill Scott had a blog entry on a similar topic called live grid. Live.net has image scrolling this way and the Google Reader does this as well. Hopefully (at least for me), we’ll see more of this.

Comment by Oliver Tse — November 9, 2006

We implemented this on klipfolio.com back in march. It’s a great way to save bandwidth, and speeds up the browsing process in general.

When building it we agonized over the proper way to handle the ‘back’ button. Rather than preload all the pages they were up to, we just started at the last page they were on (so, if they were on page 5, instead of getting 1-5 when they hit ‘back’, they start at 5), and implemented a backwards “Pageless” mechanism. Otherwise, prefetching all the pages would be a huge bandwidth hog once you’ve move down a couple of pages.

I’m not totally sold on the automatic fetching of data when you hit the bottom — instead preferring the traditional click of a ‘next’ link — but it is a nice touch =)

you can see an example page here:

http://www.klipfolio.com/index.php?action=explore,listing&by=all&sort=popularity

Comment by Mark — November 9, 2006

I use the ‘endless scrolling’ technique w/ prototype for a image based gannt view. I scroll horizontally instead of virtical. It is great and helps with load times for long spans of time becuase we only load the smallest view first and let it expand as they scroll.

Comment by Mario — November 9, 2006

This time with spell check! 8).
We also use an Ajax pooling object to take several Ajax requests per second and combine them into 1 request every ‘n’ seconds. This helps with overhead. Using server cached images, with server cached image maps, attaching them to the images when they load, and continuous scrolling works great.

Comment by Mario — November 9, 2006

It will be nice when google implements this for search results.

Comment by Kris Zyp — November 9, 2006

The day Google implements this for search results is the day I will stop using Google. This approach is indeed helpful for reading an article and some other uses – not for searching. Who actually likes live search? When you find a link after scrolling for 30 seconds, close the browser, “Oh crap” I need that link, re-search, and have to scroll for 30 more seconds to find it again – not so good. If I find a link on page 5, There’s a pretty good chance I can find it if I go back to the same page. I might try page 4 first, but I’ll get there before I would have scrolling. Forever. And for the jerks that will say “Check your history”, not everyone keeps a history, or what if I’m on a public computer, or a million other cases. At the very least, give the user the option of scroll forever until your wrist dies, or paging. I pick paging.

Comment by Dan — November 9, 2006

Very interesting, but I would raise the same issue as in the prior comment: how do you maintain context? How could I, for example, carry on with yesterday’s research where I might ordinarily know I got to page 6?

That is probably addressable by re-writing the location with context so that it’s bookmarkable and apparent to the user.

The larger question that comes to mind, of course, is how do you make something like this accessible?

Comment by Dinah Sanders — November 9, 2006

In reply to Dan and Dinah; Instead of scrolling down using the scrollbar, you could also add an horizontal slider at the bottom of the page. Lets say you have 20 pages. Normal paginators go from [ 1,2,3,5 ..... 20 ] meaning you can’t quickly go to page 10. A normal reaction is; show more pages! But what if there is limited screen width? e.g. developing on a mobile application? A slider is far more natural. I am therefore very interested in this technique, but i am going to use it for implementing a sliider technique. Need more proof? Ever seen a pocketpc user tap his screen 10 times if he needed to go to page 10? Why not implement a slider, let them slide to page 10 and show a tooltip which records are on that page.. Just my 0.02$

Comment by Gilles — November 10, 2006

[...] The Humanized Reader (via Ajaxian) is a good application of AJAX. This can solve usability issues with pages like search results or browsing through archives. The key is that the user does not have to take any additional effort to read more. Pete Forde has the meat about creating endless pageless experience using Prototype. [...]

Pingback by A Good Application of Ajax on iface thoughts — November 10, 2006

I have to say, this is rather neat!

Comment by S Rimell — November 10, 2006

Who uses a pocket PC anyway?

Comment by Dan — November 10, 2006

Didn’t books (paging) replace scrolls (endless scrolling) a looong time ago? Am I the only one that absolutely abhors scrolling forever? To call this more “Humane” and say that the reader doesn’t have to make any additional effort to read more is a bunch of hooey… I still have to scroll… and it makes my wrist hurt… that’s not humane…

That aside, it is a cool excercise in coding… although to me a useless excercise… but still cool…

Comment by Edward Vermillion — November 10, 2006

Doesn’t this destroy the whole concept of variable length scrollbars? They provide important context that is now lost.
And what if I’m actually trying to scroll to the bottom, looking for contact links or something?

Comment by c3o — November 11, 2006

Then get creative and make the contact info float like the feedback indicator [ + ] on amazon or paypal. 8/

Comment by Mario — November 12, 2006

[...] Ajaxian » Endless Pageless: Keep scrolling for more content Create a pageless scroller that polls the server for data as you scroll down. (tags: ajax Events howto interface prototype reference web2.0 scrolling pageless Usability JavaScript) [...]

Pingback by links for 2006-11-13 « Stubblog — November 13, 2006

[...] Today they show off a continuous scrolling trick like what Google Reader uses. [...]

Pingback by Naik’s News » Have you had your cute overload today? — November 15, 2006

[...] The trendiest new way to do it, which recently featured on Ajaxian, has been described on occasions as ‘lazy pagination’ (or at the least, that’s what I’m calling it) or ‘endless pageless’. Instead of requiring the user to click any buttons, it loads the data as they scroll. When they reach the bottom of the current page, an AJAX request is sent, and fetches the next lot of results. When they reach the end of the new data, rinse and repeat. [...]

Pingback by Paul’s Blog » Blog Archive » Ajax Pagination (and applying it to Wordpress) — November 24, 2006

For those interested, I just wrote a Flickr mod (using Greasemonkey) to implement endless scrolling in Flickr results.

It makes Flickr much friendlier and addictive in my opinion.

Try Flickr – Single Page Results.

Same thing for Google results.
Try Google – Single Page Results.

Comment by Dumky — April 17, 2008

That was a good explanation to implement ajax page loading on scroll down. But I am unable to see the link to search.js file to look up the code.

Comment by susheelv123 — October 14, 2011

Leave a comment

You must be logged in to post a comment.