jQuery Bullseye – Viewport Detection Events

Ever wanted to detect when the user is watching a specific element in your DOM-tree? Well, now you can – With jQuery Bullseye. This is a versatile & lightweight plug-in for jQuery that adds enterviewport and leaveviewport events to elements.

Check out the code demos to get a good grip of what this plug-in can do for you. The setup is ridiculously easy, all you have to do is to include the provided js-file. You will have the ability to use enterviewport & leaveviewport events in no time!

We actually use an early version of this plug-in here on PixelTango as well. For the “go-to-top” thing in the right-hand bottom corner of the page, and the “You might also like”-widget appearing in some posts.

Installation

Include jQuery and jQuery Bullseye in your head-declaration.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="JavaScripts/jquery.bullseye.min.js"></script>

Demos and Samples

jQuery Bullseye Demos & Documentation

// Create your event handlers
function myHandler(e) {
    alert($(this).attr('id') + ': ' + e.type);
}
// Inside DOM-Loaded event
$('.bullseye')
   // Bind events to your handlers
   .bind('enterviewport', myHandler)
   .bind('leaveviewport', myHandler)

   // Initialize the plug-in
   .bullseye();

Source & Download

This plugin is licensed under GPL Version 2.

Download jquery-bullseye-1-0b (1,83 KB)

Did you enjoy this?

Support us by sharing this article with your friends. This way we will be able to produce more content like this, and in the end we are all winners!

Comments and Feedback

PixelTango Original © 2010-08-31 | Usage

About the Author

Mickel is a web creative that is constantly looking for new challenges and ventures.

He is the founder of PixelTango, as well as a interactive web design agency. He also likes to DJ and produce music under the name Allic.

Sorry to interrupt, but...

It seems you are using AdBlock to block our advertisement (yes, 1 tiny ad). Displaying ads is essential for us to keep good quality of our posts here at PixelTango.

Please unblock, so that we can keep this site alive!