Endless pages

Overview

Inspired by the Humanized Reader (see their excellent post for the rationale), I've implemented the concept with jQuery in this very basic prototype (it just loads a static html page, but it could easily be adapted to fetch an RSS feed for example). Simply scroll to the bottom of the page and the new content will be loaded automatically.

What sets their implementation apart is their attention to detail. The user only needs to know what's happening if their actions require it. So as long as they scroll down using the scroll wheel, they won't notice a thing -- except an extraordinarily long page ;) But because of the way the browser works, loading new content via AJAX can be jarring. In other words, when something gets loaded into the DOM and the user is currently scrolling using the scrollbar, their window will jump somewhere else since the length of the page changed (the scrollbar operates on percentages).

So to avoid that problem the user is informed that new content is being loaded and will load as long as they keep off the scrollbar until it's complete. That way no jumping occurs and the user won't be jarred.

However instead of simply removing the information bar, I turned it into a navigational aid. With it, users can more easily transverse the document with speed yet know exactly what page they're at with a glance. This allows users to mentally bookmark certain areas of content, the same function pages used to provide.

This is ... it's time we stop demanding that users do work that the computer could do itself.

Note: Behavior is wonky in IE and Opera -- instead of waiting until the mouse is released, they go right ahead and load the content regardless. There's a way around this but it includes clicking in the browser after you've reached the bottom (which is the same as Safari)... it's all because they don't detect mouse events in the entire window (which includes the scrollbar). And once again I can't bring myself to care enough when working on my free time.

[download] (includes both jQuery and the Dimensions plugin)

Corey von Birnbaum
coldconstructs.com

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum nec tellus et elit dictum tincidunt. Duis pede. Quisque tincidunt ipsum in ipsum. Curabitur lacinia est vel orci fringilla aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec condimentum varius eros. Nulla at enim. Integer adipiscing purus eu neque. Aenean id leo id nulla lacinia tempus. Suspendisse lacus nibh, consectetuer ut, accumsan vel, imperdiet a, velit. Aenean placerat, lorem eget dapibus rhoncus, nisi velit ultricies justo, at viverra tellus risus nec lorem. Donec quis odio. Nullam eget erat sed augue adipiscing tempor. Etiam euismod ante. Sed tristique purus nec felis. In pede justo, interdum sit amet, scelerisque sed, euismod sed, justo. Cras vehicula iaculis urna.

In ut justo. Maecenas bibendum lorem sit amet ligula. Vestibulum nulla felis, condimentum a, vulputate eget, fringilla sed, dolor. Donec enim nunc, facilisis et, luctus et, interdum ac, lacus. Nulla odio tortor, aliquet id, accumsan ut, posuere vitae, magna. Morbi eget dui in erat vehicula posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla velit. Donec nec justo id lacus bibendum convallis. Proin consectetuer fermentum dui. Suspendisse in eros. Aenean eget neque ut ante faucibus tristique. Aliquam magna quam, imperdiet fringilla, porttitor ut, hendrerit nec, magna. Quisque commodo ultrices elit. Integer vehicula neque eget magna. Donec laoreet. Sed mauris lectus, viverra ut, tincidunt non, lacinia eget, elit.

Aenean faucibus enim non metus. Maecenas vehicula, pede nec feugiat rutrum, lorem erat semper est, quis venenatis neque felis sit amet nibh. Ut convallis metus ac lacus. Praesent cursus. Etiam tincidunt vestibulum nisl. Aenean id purus eu dolor sollicitudin elementum. In id odio quis sapien suscipit fermentum. Nullam erat est, pellentesque a, pellentesque non, mattis ut, magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce enim purus, mattis id, semper ut, blandit eu, mauris. Ut interdum. Nulla ut ipsum. Donec commodo. Phasellus a augue eu quam condimentum porta. Morbi scelerisque. Fusce tincidunt porta tellus. In hac habitasse platea dictumst. Pellentesque ut turpis.

Quisque a tellus eget tortor dictum euismod. Nam facilisis tempus eros. Nullam quis elit imperdiet urna mollis dapibus. Nulla quis libero lacinia tortor interdum dignissim. Aliquam elit. Sed rhoncus mauris nec turpis. Nunc id leo eget neque sollicitudin commodo. Vivamus fermentum velit egestas mi. Proin sagittis pellentesque felis. Donec malesuada risus. Proin aliquet porta augue. Sed aliquet pharetra velit. Etiam condimentum, mauris sit amet dictum sollicitudin, sem arcu auctor diam, ut tempor sapien ipsum at nulla. Duis ut nisl at sapien convallis congue. Maecenas tellus odio, gravida a, adipiscing auctor, tempor non, augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Morbi in nulla. Nam sed justo. Fusce dapibus. Nulla neque justo, faucibus quis, cursus ut, dictum non, odio. Nulla sagittis sodales sem. Nam varius leo in tortor. Aliquam mollis lobortis purus. Etiam dolor enim, porttitor eu, convallis quis, dignissim ultrices, odio. Nam et nisl nec nulla posuere tristique. Donec sodales malesuada massa. Donec mi tellus, vehicula vitae, varius ut, pharetra eget, enim. Donec sit amet massa. Etiam egestas, sapien ac tempus pellentesque, massa mauris sollicitudin ante, ut porttitor turpis ante non sem. Aliquam condimentum facilisis ipsum. In hac habitasse platea dictumst. Nunc est neque, viverra id, molestie vitae, congue id, enim. Maecenas sed felis. Donec velit. Maecenas mollis mi auctor erat. Donec pellentesque.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas elementum interdum orci. Proin consequat, mi in convallis suscipit, est mi faucibus est, in dignissim magna est sit amet libero. Morbi dolor. Nullam libero. Ut in turpis vel neque suscipit lobortis. Curabitur facilisis arcu ut risus. Cras ac libero. Donec ac mi. Phasellus sem. Nulla accumsan sapien eget nunc. Cras euismod. Maecenas sit amet neque. Suspendisse nisl nunc, rhoncus quis, pretium lacinia, porta nec, lectus. Praesent eu nisl id est malesuada luctus. Donec mattis ante id massa. Morbi aliquet. Ut vitae purus. Morbi varius condimentum elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam quis tellus sed mauris tempor pretium.

Nam lacinia. Morbi semper. Vestibulum velit lacus, vulputate sit amet, vulputate sed, suscipit at, nibh. Cras elementum placerat nibh. Donec tempus, felis sed hendrerit aliquam, justo tellus iaculis urna, at tincidunt est risus vitae urna. Aenean vel odio. Suspendisse non orci. Nulla facilisi. In vel est sed justo dapibus sagittis. Morbi justo lacus, rhoncus ut, eleifend ac, blandit a, odio. Aenean feugiat. Fusce eleifend imperdiet sem. Integer ut lectus vel ipsum condimentum congue. Nunc pretium mollis enim. Duis vehicula tristique diam. Nullam vestibulum elit non mauris.

Morbi sagittis odio et lacus. Phasellus urna elit, dapibus id, ornare a, laoreet eget, ante. Morbi sapien. Phasellus quis massa et nibh aliquam sagittis. Morbi lacus nisl, porta ac, sagittis id, pellentesque sit amet, nulla. Ut pharetra turpis a urna. Vivamus interdum imperdiet elit. Vivamus vulputate, tellus nec molestie facilisis, urna diam dapibus tortor, et elementum arcu elit a sapien. In hac habitasse platea dictumst. Donec at massa. Aliquam felis. Cras molestie lobortis augue. Quisque a pede a justo pulvinar lobortis. Fusce ac est. Proin semper metus molestie justo. Nullam convallis placerat felis. Maecenas nec justo a justo convallis dapibus. Duis convallis arcu et urna. Donec neque est, consectetuer sed, convallis eu, sagittis id, orci.