Thursday, November 9th, 2006
Endless Pageless: Keep scrolling for more content
Category: Articles, Examples
, Prototype
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:
- Keep Background Graphic From Scrolling
3.7 rating from 60 votes
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.
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.
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
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.
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.
It will be nice when google implements this for search results.
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.
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?
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$
[...] 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. [...]
I have to say, this is rather neat!
Who uses a pocket PC anyway?
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…
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?
Then get creative and make the contact info float like the feedback indicator [ + ] on amazon or paypal. 8/
[...] 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) [...]
[...] Today they show off a continuous scrolling trick like what Google Reader uses. [...]
[...] 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. [...]
The Gmail mobile application is indeed gaining more popularity lately. I’m glad that you’ve cleared this out.
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.
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.