Building A Great DHTML Chaser - DHTML Lab | 3
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 .
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:
Record the current distance the window has scrolled added to the distance you want it to maintain from the top of the window frame.
Record the difference between the number derived in step 1 and the chaser's current position.
Calculate the amount to move the chaser, by multiplying the number from step 2 by some constant positive fraction.
Decrement the chaser's current position by the number derived in step 3.
Go to step 1.
Produced by Aaron Boodman andAll Rights Reserved. Legal Notices.
Revised: Sept 19, 2000