moveElement

moveElement Method addLoadEvent Method

by Lien Z

HTML

<div id="message"> Whee!</div>

JavaScript

function addLoadEvent(func){
    var oldonload = window.onload;
    if(typeof window.onload != "function"){
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload();
            func();
        };
    }
}

function moveElement(elementID, finalX, finalY, interval) {
    var elem = document.getElementById(elementID);
    var xPos = parseInt(elem.style.left,10);
    var yPos = parseInt(elem.style.top,10);
    
    if(xPos == finalX && yPos == finalY) {return};
    if(xPos < finalX) xPos++;
    if(xPos > finalX) xPos--;
    if(yPos < finalY) yPos++;
    if(yPos > finalY) yPos--;

    elem.style.left = xPos + "px";
    elem.style.top = yPos + "px";

    var repeat = "moveElement('"+elementID+"'," +finalX+", "+finalY+", "+interval+")" ;
    var movement = setTimeout(repeat, interval);
}

function positionMessage(){
    var elem = document.getElementById("message");
    elem.style.position = "absolute";
    elem.style.left = "50px";
    elem.style.top = "100px";
    moveElement("message",200,200,10);
}



addLoadEvent(positionMessage);