De-pagify let’s you easily enable endless scroll for paged sites such as fmylife, digg, failblog to enable functionality similar to Bing image search.

See the article: Making a Case For Endless Scrolling.

You can find this plugin at http://plugins.jquery.com/project/de-pagify or view latest code & documentation is available at http://github.com/ericclemmons/de-pagify.

Demo

View Demo

Usage

Typical usage will follow the pattern:

jQuery(link).depagify(options);

Options

Where link matches the “Next Page” link and options can override any of the following:

• container: (defaults to body) Where content is appended and where remote content comes from

• filter: (defaults to null) Selector or function to filter remote content

• trigger: (defaults to 0.90) Float, integer, string or function to determine when to load remote content. The default is 0.90, which is 90%. You can use 167, for example, to load content when the user scrolls within 167px of the bottom of the page. Also, you can specify a selector (such as #footer) to load content when the #footer element scrolls into view. Finally, you can write your own function that returns true whenever you’d like load the next page’s content.

• request: Callback when content is being requested. Useful for cleaning up the page or providing UI feedback.

• success: Callback when content is appended. Useful for cleaning up new content or messaging the user.

• effect: (defaults to $(this).show()) Function to transition newly loaded content. (New content is wrapped by $('<div />).hide())

Recipes

Here are a couple popular, ready-to-go bookmarklets you can inject into everyday websites. Keep in mind you may need to either inject jQuery with a bookmarklet (link) and the De-pagify bookmarklet.

• Digg.com (source)
• FMyLife.com (source)

Examples

To play around with de-pagify, you should probably get the jQuerify Bookmarklet which will inject jQuery into the page.

Secondly, take advantage of the De-Pagify Bookmarklet

Example 1: FMyLife.com

First & foremost, we can simply enable de-pagify via:

jQuery('.pagination:last a:last').depagify({
    container: '#wrapper',
});

Simply put, .pagination:last a:last will grab the last anchor tag in the last .pagination element on the page. All new content will be pulled from the remote #wrapper element and appended to the current #wrapper element.

But let’s say we want to only load content when the footer comes into view, and we’d like a smoother animation instead of showing results immediately:

jQuery('.pagination:last a:last').depagify({
    trigger: '#footer',
    container: '#wrapper',
    effect: function() {
        jQuery(this).fadeIn('slow');
    }
});

When new content is inserted in the page, it is wrapped in a plain <div> to simplify DOM manipulation. This <div> is bound to this in the effect callback.

So, we have a pretty nice, smooth experience now. However, say you want to remove the page lists (1, 2, 3, Next, Prev, etc.) and the ads to ensure a more consistent experience:

jQuery('.pagination:last a:last').depagify({
    trigger: '#footer',
    container: '#wrapper',
    effect: function() {
        jQuery(this).fadeIn('slow');
    },
    request: function(options) {
        jQuery('.pagination', options.container).remove();
    },
    success: function(event, options) {
        jQuery('#ad_leaderboard', options.container).remove();
    }
});

The code is self-explanatory. When we send off the request, we remove the .pagination element, as it is not needed anymore. Similarly, when the new content is inserted all ads are removed. Both events could take place entirely in the success callback, but for this example I separated the two.

Conclusion

If you can help in any way, please fork this project or provide feedback.

• Previous Entry: Making Your Own Growl Widget With Dojo
• Next Entry: Making a Case For Endless Scrolling