JavaScript Element Visibility Tracker
Websites
Sunday, 30 January 2011 20:08

I just created a new JavaScript library that tracks the visibility of a set of elements. When the visibility of the element changes, an event is fired that contains detailed information about the visibility of that element (if it is fully visible or just partially, if it is the first or last visible element, etc. There are a few interesting things you can do with this:

  1. Highlight content as it is being viewed in a forum or similar.
  2. Delay loading content into an element until it becomes visible.
  3. Track which parts of the page are viewed and send that information off to a web analytics service.
  4. What else can you come up with?

I think it's pretty easy to use the library, but hey I wrote it. Why don't you check out the Element Visibility Tracker source code on Git Hub. You might also be interested in a brief example:

 
jQuery(document).ready(function(){
    var pEls = document.getElementsByTagName('p');
    jQuery(pEls).bind('visibility-status-change', function(evt, visibilityStatus) {
        if (visibilityStatus.isLastVisible()) {
            jQuery(evt.target).addClass('lastVisible');
        } else {
            jQuery(evt.target).removeClass('lastVisible');
        }
    });
    new VisibilityTracker(pEls);
});
 

blog comments powered by Disqus