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
bubbleo FunctionIE4
typeo FunctionIE4
switcho FunctionIE4
scrollo FunctionIE3,IE4,NS3,NS4
isie4 FunctionIE4
profileo FunctionIE4
Anchor FunctionsIE4
Path FunctionsIE4

styleo FunctionsIE4

Download Library
 

moveo() Function

The moveo() function moves any CSS positioned element around the screen. 

To use this function, you need to first define an element with a unique ID and the POSITION, TOP and LEFT style properties defined.  For example, if the POSITION is set to ABSOLUTE, then the element is positioned offset from its contained coordinate system: 

<DIV STYLE="position: absolute; top: 10px; left: 10px" ID=myDiv>
  Initial position is 10 pixels from the upper-left of the document
</DIV>

When you call the moveo(i, x, y, a) function, i is the element, x is the finishing horizontal (LEFT) coordinate, y is the finishing vertical (TOP) coordinate and a is the number of pixels to move per milisecond.  To move the above DIV to 100 pixels over and 20 pixels down: moveo("myDiv", 100, 20, 2)

If the element has RELATIVE positioning, then the element is offset from where the element normally appears in the document. Using the moveo function with relative positioning allows you to animate portions of your page onto the screen.

Below is a complete example using relative positioning that moves the elements from offscreen into their position in the document.  

<SCRIPT language=javascript>
function go() {
    moveo(word1, 0, 0, 10);   
    moveo(word2, 0, 0, 15);
    moveo(word3, 0, 0, 15);
    moveo(word4, 0, 0, 10);
}
</script>
<div id=title style="color: red; font-size: 24pt; text-align: center">
    <span id=word1 style="position: relative; top: 0; left: -500">Welcome</SPAN>
    <span id=word2 style="position: relative; top: 500; left: -500">To</SPAN>
    <span id=word3 style="position: relative; top: 500; left: 500">Inside</SPAN>
    <span id=word4 style="position: relative; top: 0; left: 500">DHTML</SPAN>
</div>

moveo() Function

function moveo(i, y, x, a) {
        yNow = i.style.posLeft;
        xNow = i.style.posTop;
        var b = a - 1;

        if (yNow > (y + b)) {
                yNow = yNow - a;
                i.style.posLeft = yNow;
        } else if (yNow < (y - b)) {
                yNow = yNow + a;
                i.style.posLeft = yNow;
        } else {
                yNow = y;
                i.style.posLeft = yNow;
        }

        if (xNow > (x + b)) {
                xNow = xNow - a;
                i.style.posTop = xNow;
        } else if (xNow < (x - b)) {
                xNow = xNow + a;
                i.style.posTop = xNow;
        } else {
                xNow = x;
                i.style.posTop = xNow;
        }

        if (yNow == y && xNow == x) {
                return;
        }
	
        ab1 = window.setTimeout("moveo("+i.id+","+y+","+x+","+a+");", 1);
}

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