Forum Moderators: open
I've been experimenting with moving objects using DHTML, and the snippet below is one such experiment.
<head>
<script type="text/javascript" language="javascript">
objectLeftPos = 0
objectTopPos = 0;
function moveRight(item,endpo) {
if (objectLeftPos < endpo) {
objectLeftPos += 10;
document.getElementById(item).style.left = objectLeftPos;
setTimeout("moveRight('"+item+"','"+endpo+"')",80)
}
else window.status=document.getElementById("object1").offsetLeft+'px; '+document.getElementById("object2").offsetLeft+'px ;'+document.getElementById("object1").offsetLeft+'px'
// to reveal x-coord of end position of objects
}
</script></head>
<body>
<div id="object1" style="position:absolute;top:100px;left:0px;width:100px;">Object 1</div>
<div id="object2" style="position:absolute;top:150px;left:0px;width:100px;">Object 2</div>
<div id="object3" style="position:absolute;top:200px;left:0px;width:100px;">Object 3</div>
<form><input type="button" value="Move Right" onclick="moveRight('object1','300');moveRight('object2','300');moveRight('object3','300');">
</form>I'm looking to have all three objects moving at the same time and ending up at the same x-coordinate, and wondered if anyone knew what the code "should" be to bring that about?
At the moment there is a horizontal difference of 10px between each object's end position (as revealed by the status bar), which is somewhat baffling.
This'll do the trick-
curObj=document.getElementById(item);
if (curObj.offsetLeft < endpo)
{
curObj.style.left = curObj.offsetLeft + 10;
setTimeout("moveRight('"+item+"','"+endpo+"')",80)
....
