Member Avatar for gaz

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
  • 54 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

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 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.