Twitter like content auto load on scroll into view
I guess everyone of you already know content loading mechanism used on the Twitter site. When you scroll down at the bottom of current page another content is loaded immediatelly without you clicking on any UI element. It's a very nice idea for AJAX powered listings and you'd probably take advantage of it on your own site too. I came to the same conclusion also but it seems there is no single jQuery plugin enveloping this kind of mechanism. Searching Google you could find several articles describing how to implement similar funcionality with jQuery but you wouldn't find any jQuery plugin ready to use. So I decided to make one for this purpose - it's called TriggerOnView plugin.
Plugin itself is very subtle. Let say you have a control element somewhere that loads more content to the page when user clicks on it (imagine link named "Older records" loading another page of records at the bottom of the page). You already have loading and appending mechanism ready and working for your page - but what about not forcing user to click on the link? What about letting the "click" event happen automatically at the time user scrolls down to the bottom of the page and see this link?
You can enrich your site with this functionality very easily using triggerOnView jQuery plugin. All you need to do is:
1. embed plugin to the page
<script type="text/javascript" src="https://github.com/novoj/jQuery-triggerOnView-plugin/raw/master/src/jquery.triggeronview.js"></script>
2. alter desired link with this call
$("#loadContentLink").triggerOnView();
And that's all. When the link gets displayed to the user, click event is automatically triggered by this plugin. Ofcourse, this is example of the main use-case but you can use this for any kind of element and trigger any kind of event on it. You can also further customize triggerOnView plugin with following ...
Options
- eventType (default "click")
- defines the event, that should be triggered
- verticalRange (default 0)
- vertical offset to expand reaction area (you may need to trigger event even before element gets into the view, but user is in the vicinity of it)
- horizontalRange (default 0)
- horizontal offset to expand reaction area (you may need to trigger event even before element gets into the view, but user is in the vicinity of it)
- singleShotOnly (default true)
- if set to true triggerOnView handler is removed after event has been triggered and will trigger any event no more
- callback
- function that should be invoked just before event triggering, if the function returns false, triggering is stopped
function signature: function(domElement, settings)
Download information
Plugin is licensed under the MIT License.
Further information (based on readers' reactions)
Similar mechanism is covered also by the Infinite Scroll jQuery plugin that has much longer development history (since 2008). Infinite Scroll plugin provides much more complex functionality for your paginated data but on the other hand is quite heavy weight. So when you need only triggering mechanism (having loading logic already on place) you still might recognize this plugin as a better solution for you. You should probably give a shot to the infinite scroll plugin and other articles connected to it and make well-informed decision yourself. I want to point out at least one referenced article - FOR GOD’S SAKE, DON’T BREAK THE BACK BUTTON that brings up several interesting issues you should take into account.
