0

hi i am trying to make a div move but i want to make a loop so i can move more than one. I put the variables into the funtion, it works fine with the destination variables but when put x and y in the function it returned get elementById is null.

I am wondering why this has happened thanks

<script type="text/javascript">   


function moveimg() { 
                  
var x = 10; //Starting Location - left
var y = 10; //Starting Location - top
 var dest_x = 400; //Ending Location - left
var dest_y = 200; //Ending Location - top
intervalX = Math.ceil(dest_x/dest_y);
intervalY = Math.ceil(dest_y/dest_x)
   
if(x > dest_x) {
x -= intervalX;
} else if(x < dest_x) {
x += intervalX
}
if(y > dest_y) {
y -= intervalY;
} else if(y < dest_y) {
y += intervalY
}
// Just in case we're closer to the destination than the motion interval
if(Math.abs(dest_x - x) < intervalX) x = dest_x;
if(Math.abs(dest_y - y) < intervalY) y = dest_y;

if (x != dest_x || y != dest_y) {
// Repeat the operation
document.getElementById("picme").style.left = x+'px';
document.getElementById("picme").style.top = y+'px';
window.setTimeout(moveimg,100);
}
}    
</script>


</head>
<body onload="moveimg()">
2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by Airshow
0

Gaz,

If all your moving elements are contiguous within the DOM (or can be made so), then a much simpler approach is available - namely, create a div to wrap all the elements and style it with position:absolute; or position:relative; (and initial left/top).

Now modify your moveimg() function to move the wrapper. Its contents will move with it - all looked after by the browser.

Airshow

Edited by Airshow: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.