www.insideDHTML.com
Inside Dynamic HTML | Fun and Games | The 10K Demo | XML Online | CSS Online | Resources
Write Once! | DHTML Toolkits | Inside Techniques | Inside Scriptlets

Inside Techniques/

  Introduction
moveo FunctionIE4
fadeo FunctionIE4
bubblo FunctionIE4
typeo FunctionIE4
switcho FunctionIE4
scrollo FunctionIE3,IE4,NS3,NS4
isie4 FunctionIE4
profileo FunctionIE4
Anchor FunctionIE4
Path FunctionsIE4

styleo FunctionsIE4

Download Library

  

Path Functions

This function moves an element along a specified path of points. To use this feature, you need create a custom path object. The path object is created with the following code, i = new path(x);, where x is the ID of the element you want to use. The element specified by x must have a position attribute in the style declaration.

The next step is to define the path the element will follow by specifying a set of points. A point is defined with the addPoint method, 

i.addPoint(x, y, s)
where:
xThe left coordinate
yThe y coordinate
sThe speed of the movement

The last step is to call the runMe() method to start the animation.

An extra optional step is to set the onPath() event property to a function in your script. This function is called after the animation is complete allowing you to sequence together multiple paths.

Demonstration

Internet Explorer 4.0 Only 
<div id=myDiv style="position: relative">This is Cool!</div>
<input type="button" value="Run Demo" onclick="myPath.runMe()">
<script>
  myPath = new path(myDiv);
  myPath.addPoint(0, 100, 10);
  myPath.addPoint(100, 100, 10);
  myPath.addPoint(100, 0, 10);
  myPath.addPoint(0, 0, 10);
  myPath.onPath = new Function('alert("Done!")');
</script>

Path Functions

function path(i) {
        this.moved = i;
        this.curr = 0;
        this.ArrayX = new Array();
        this.ArrayY = new Array();
        this.ArrayS = new Array();
}

path.prototype.addPoint = addPoint;
path.prototype.runMe = runMe;

function addPoint(x, y, s) {
        Alen = this.ArrayX.length;
        this.ArrayX[Alen] = x;
        this.ArrayY[Alen] = y;
        this.ArrayS[Alen] = s;
}

function runMe() {
        move = this.moved;

        if (move.style.posLeft == null) {
                move.style.posLeft = 0;
        }
        if (move.style.top == null) {
                move.style.posTop = 0;
        }

        move.ArrayX = this.ArrayX;
        move.ArrayY = this.ArrayY;
        move.ArrayS = this.ArrayS;

        runGo(move, -1);
}

function runGo(i, c) {
        if (c == -1) {
                c = 0;
                x = i.ArrayX[c];
                y = i.ArrayY[c];
                s = i.ArrayS[c];
                moveo(i, x, y, s);
        }

        if (i.style.posLeft == i.ArrayX[c] && i.style.posTop == i.ArrayY[c]) {
                if (c < (i.ArrayX.length - 1)) {
                        c = c + 1;
                        x = i.ArrayX[c];
                        y = i.ArrayY[c];
                        s = i.ArrayS[c];
                        moveo(i, x, y, s);
                } else {
                        return;
                }
        }

        ab9 = window.setTimeout("runGo("+i.id+","+c+")", 1);
}

Copyright © 1997-98 InsideDHTML.com, LLC.
All rights reserved.