zelph.com

Information

This version: 1.0
Last Updated: 03.04.2006
Download: onViewable

Purpose

To fire off a JavaScript function once a given element is viewable on the screen.

What is it?

This script starts looping, conitnually trying to run it’s code until the desired element is viewable in the browser window.

How does it work?

You provide two things.

1 – What you want the code to be run on – With this current version, you can only pass it a single ID at a time. There are a few reasons for this:

• Because of needing to pass the variable through recursively via the setTimeout. It can only pass along strings, not objects.
• If multiple elements were used, tracking which ones had been done or not would add extra code that I’m not sure if I want to add yet or not. But it may come in the future.

2 – What code you want to be run – You can pass it any code that you want, as it does an eval on it when it’s time to run it. Again, I know that this may not be super efficient, but if anyone can think of something better, please let me know.

Every X milliseconds (changeable of course) the script tries to run your code again, checking to see if the element is viewable on the screen. When it is, it runs the desired code. This may effect that element, or do something totally unrelated to it. To detect the location of the element and information about the viewport, I borrow some of the great cross-browser functions availble at quirksmode.org by the great PPK. Specifically findPosY and two derived functions from his example code (edited for use of height only) of getScoll and getHeight (my names).
The code to run can be placed at the top or bottom of the page, as it checks for the existance of the element, and if it’s not there, it loops through again.

Why use it?

A great example for using onViewable, is when using the Fade Anything technique to denote a change on the page. This works great to bring the attention of the user to an update on the page. But what if the update happend to something that is off the screen? The fade would occur without the user being able to see it. This makes it so that the fade occurs when the fade will be viewable to the user.

Other random ideas for using onViewable:

• Detect if someone has scrolled down a long page. We have a few longish pages at my job, and other then time spent on page, we don’t know if they have scrolled down to read the goods or not. We haven’t done it yet, but this would give us a way to fire an AJAX request or something to show that the user did in fact scroll down to points X, Y, or Z
• Detect what banner ads have been seen. Similar to the above, but could get more complicated and track per advertisment if it was actually seen on the screen or not. Good for ads that are not above the fold. I’m sure advertisers would be interested in this kind of data.
• Play a video or other marketing message when the user gets to the bottom of a page. Maybe some kind of a “thanks for reading this far” or “since you’ve read this far, you get something spiffy”. Sure you could mention that in the text, but it might get lost with the rest of the text on the page. Being able to fire off a multi-media presentation of some kind may have more impact.

Can you tell that I am in a marketing department? Most of the examples I came up with were for engaging the user farther down the page, but I am sure there are other good ideas out there… somewhere. Got any?

See it in action

Example 1 – Fade Anything Technique as you scroll down the page.
Example 2 – Count which ads you have seen. (coming soon)

Compatibility

Works fine in FireFox 1.5, IE 6.0 SP2, Netscape 7.1 and Opera 8.5 on Windows. As well as OS X Safari 2.0.3, Camino 1.0, Netscape 7.1 (Thanks France)
If anyone can report back success in other browsers and platforms, please do.

Changelog

03.07.2006 – 1.0 – Orignal version

Comments(4)