Building A Great DHTML Chaser - DHTML Lab | 8

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

Since the animation always takes the same amount of time, it looks somewhat unnatural when it has to move a far distance. You don't see if for a long time, and then it zips into place at the very last second. To avoid this, we just need to make it so that the panel can never get too far away from the window.

To do this, I arbitrarily picked 1 window height as the maximum allowable distance from the window frame that I would allow the panel to rest. If it travels further than that, I just pick it up and move it back to a distance of one window height.

I made the following minor changes to the object definition and to the slideInit method:

var oChaser = {
    topMargin   : 25,
    callRate    : 10,
    slideTime   : 1200,
    // max_diff is the maximum distance the script will allow
    //between the chaser and its target position
    maxDiff     : document.all ? document.body.clientHeight : window.innerHeight,
    isIE        : document.all ? true : false,
    chaserDiv   : document.all ? document.all.chaser : document.chaser
}
...
oChaser.slideInit = function( )
{
    var now    = new Date( )
    
    this.A     = this.targetY - this.currentY
    this.B     = Math.PI / ( 2 * this.slideTime )
    this.C     = now.getTime( )
    
    // if the user has scrolled further than max_diff,
    // then we need to set D so that this
    // is not true. Also, we'll need to adjust A so that
    // it represents the new slide distance.
    if (Math.abs(this.A) > this.maxDiff) {
        this.D = this.A > 0 ? this.targetY - this.maxDiff : this.targetY + this.maxDiff
        this.A = this.A > 0 ? this.maxDiff : -this.maxDiff
    } else {
        this.D = this.currentY
    }
}
...

Here's the finished product. If you have multiple computers near you, go ahead and test them on each to see if the performance changes. I bet it doesn't....

Want to put one of these bad boys on your website? On the next page, I'll give you everything you need to get this working immediately.

Produced by Aaron Boodman and

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

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