Building A Great DHTML Chaser - DHTML Lab | 4

Logo

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



Object Literals

Object literals are similar to array literals in that they are a simple way to assign an entire complex data type to a variable with just one command. Object literals look like this: 

myCarObject = {
    make: "Ford",
    model: "Escort",
    color: "White",
    miles: 1000000,
    quality: "extremely low"
}

... which is the same as saying:

myCarObject = new Object()
myCarObject.make = "Ford"
myCarObject.model = "Escort"
myCarObject.color = "White"
myCarObject.miles = 1000000
myCarObject.quality = "extremely low"

The Simple Chaser

Now that I've shown you the algorithm and the syntax, here's the simple chaser script:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
// "hover" is the point below the top frame of the window that
// I want the chaser to attempt to maintain.
// "divisor" has a direct relationship with
// the smoothness of the animation, and an inverse relationship
// with the length of the animation.
// "callRate" has an inverse relationship
// with the length of the animation.
// supply the id of the target <DIV> tag for "layer"
// between the last set of brackets.
Chaser = 
{
    hover   : 50,
    divisor : 6,
    callRate: 55,
    layer   : document[document.all ? "all" : "layers"]["myChaser"]
}
    
// We will constantly call this function to check the position
// of the chaser relative to the window frame, and move it if necessary.
Chaser.paint = function() {
    // browser specific way to check amount window has scrolled by.
    targetY = (document.all ? document.body.scrollTop : window.pageYOffset) + Chaser.hover;
    // browser specific way to check chaser's position.
    currentY = document.all ? Chaser.layer.style.pixelTop : Chaser.layer.top
    difference = currentY - targetY;
    decrement = Math.round(difference / Chaser.divisor);
        
    // browser-specific method of moving chaser
    if (document.all)
        Chaser.layer.style.pixelTop -= decrement
    else
        Chaser.layer.top -= decrement
}
    
window.setInterval("Chaser.paint()", Chaser.callRate)
</SCRIPT>

The results of this simple script can be viewed here: simple_chaser.html.

After you've given the chaser a look, move on to the next page where we point out a fundamental problem with the script thus far.


Produced by Aaron Boodman and

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

URL: http://www.webreference.com/dhtml/column37/4.html