Building A Great DHTML Chaser - DHTML Lab | 3 | WebReference

Building A Great DHTML Chaser - DHTML Lab | 3

Logo

DHTML in GreatEqualizer.com, I:
Building A Great DHTML Chaser



Welcome to the first article of my series on www.GreatEqualizer.com.

In this article, I discuss the implementation of the DHTML "chaser" panel that follows you around as you scroll in the courses section of the website. To see what I mean, go to the search page enter some general criteria, and click "search." See how the panel on the right follows you around as you scroll...? In this article, I'll actually show you two ways to get that effect, one that's easy and one that's more compatible on a variety of platforms. We'll also delve into animation theory, some trigonometry, and simple object oriented programming. So get out some graph paper and a pen - this is where it gets fun .

To start, we should decide what makes a chaser good and what makes it terrible. The most aggravating chasers I've seen were set up so that they were constantly trying to stay exactly in step with the scroll position of the window - an impossible task. Since they cannot possibly stay perfectly in step with the browser window, what you get is an annoyingly jagged animation that makes people leave in a hurry. The problem is caused by the fact that the maximum frame rate that JavaScript can attain in a Web browser is relatively low. This number varies with each operating system (see an excellent article pertaining to this here on DHTML Lab), but on no operating system is it fast enough to keep up with the average user's scrolling.

How do we get past this problem? We can't. However, we can turn the problem into a feature by modifying the effect we try to achieve. We accept that the chaser will always lag behind the scrolling action of the window, and instead seek only to smooth and normalize that motion.

Here is a simple algorithm that gets the desired effect:

  1. Record the current distance the window has scrolled added to the distance you want it to maintain from the top of the window frame.

  2. Record the difference between the number derived in step 1 and the chaser's current position.

  3. Calculate the amount to move the chaser, by multiplying the number from step 2 by some constant positive fraction.

  4. Decrement the chaser's current position by the number derived in step 3.

  5. Go to step 1.

Before I show you the script, I need to explain one little-known JavaScript trick I use frequently - object literals.


Produced by Aaron Boodman and

All Rights Reserved. Legal Notices.
Revised: Sept 19, 2000

URL: https://www.webreference.com/dhtml/column37/3.html