The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
De-Pagify
De-pagify let's you easily enable endless scroll for paged sites such as
fmylife, digg, failblog and other blog sites to enable functionality similar to
Bing image search.
The latest code & documentation is available at http://github.com/ericclemmons/de-pagify.
Usage
Typical usage will follow the pattern:
jQuery(link).depagify(options);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.
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 is0.90, which is90%.
You can use167, for example, to load content when the user
scrolls within167pxof the bottom of the page.
Also, you can specify a selector (such as#footer) to load
content when the#footerelement scrolls into view.
Finally, you can write your own function that returnstrue
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())
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.
