Animation Movement Handler

[avaitla]

I was wondering if anyone could help me out with this issue. I am creating a basic function that will handle movement of an item that is absolutely positioned on a webpage (function moveElement). I begin with the onload event item which calls function prepare which calls function moveElement with the specified parameters. elementID is the HTML id of the item to be moved, finalx is the x-coordinate it should be moved to, finaly is the y-coordinate it should be moved to, interval is for the setTimeout function, and steps is how many steps it should take for the object to get there.

I have placed alert boxes to test the function. The first call from prepare displays all teh alert boxes and the varibles they hold, but the setTimeout doesn't seem to be working. Whenever the code reaches that point, when it supposed to trigger the alerts from the second call of the function, it doesn't do so. So could some one help me figure out this problem? thanks

window.onload=prepare;

function prepare()
{
	var item=document.getElementById("preview");
	item.style.top="0px";
	item.style.left="0px";
	moveElement("preview",200,400,25,50);
}

function moveElement(elementID,finalx,finaly,interval,steps) 
{	
	var item=document.getElementById(elementID);
	var currx=parseInt(item.style.left);
	var curry=parseInt(item.style.top);
	var xdist=finalx-currx;
	var ydist=finaly-curry;
	var xincr=xdist/steps;
	var yincr=ydist/steps;
	
	alert(currx);
	alert(curry);
	
	currx+=xincr;
	curry+=yincr;
	
	alert(currx);
	alert(curry);
	
	item.style.left=currx+"px";
	item.style.top=curry+"px";
	steps=steps-1;
	
	alert(item.style.left);
	alert(item.style.top);
	
	var mover=setTimeout("moveElement(elementID, finalx, finaly, interval,steps)", interval);
}

[avaitla]

see below

[avaitla]

see below

[avaitla]

I changed the last line of code to this:

var repeat="moveElement("+elementID+","+finalx+","+finaly+","+interval+","+steps+")";
	alert(repeat);
var redo=	setTimeout(repeat, interval);

The additional alert box is to verify that i am sending the correct information to the setTimeout function.
However it still is not working.

[Troy III]

I was wondering if anyone could help me out with this issue. I am creating a basic function that will handle movement of an item that is absolutely positioned on a webpage (function moveElement). I begin with the onload event item which calls function prepare which calls function moveElement with the specified parameters. elementID is the HTML id of the item to be moved, finalx is the x-coordinate it should be moved to, finaly is the y-coordinate it should be moved to, interval is for the setTimeout function, and steps is how many steps it should take for the object to get there.

I have placed alert boxes to test the function. The first call from prepare displays all teh alert boxes and the varibles they hold, but the setTimeout doesn't seem to be working. Whenever the code reaches that point, when it supposed to trigger the alerts from the second call of the function, it doesn't do so. So could some one help me figure out this problem? thanks

window.onload=prepare;

function prepare()
{
	var item=document.getElementById("preview");
	item.style.top="0px";
	item.style.left="0px";
	moveElement("preview",200,400,25,50);
}

function moveElement(elementID,finalx,finaly,interval,steps) 
{	
	var item=document.getElementById(elementID);
	var currx=parseInt(item.style.left);
	var curry=parseInt(item.style.top);
	var xdist=finalx-currx;
	var ydist=finaly-curry;
	var xincr=xdist/steps;
	var yincr=ydist/steps;
	
	alert(currx);
	alert(curry);
	
	currx+=xincr;
	curry+=yincr;
	
	alert(currx);
	alert(curry);
	
	item.style.left=currx+"px";
	item.style.top=curry+"px";
	steps=steps-1;
	
	alert(item.style.left);
	alert(item.style.top);
	
	var mover=setTimeout("moveElement(elementID, finalx, finaly, interval,steps)", interval);
}

The problem is related to: missing variable values!

The "var mover=setTimeout("moveElement(elementID, finalx, finaly, interval,steps)", interval);" is passing empty vars to the function at the very first step of the timer call.

This will do:

window.onload=prepare;

function prepare()
{
	var item=document.getElementById("preview");
	item.style.top="0px";
	item.style.left="0px";
	moveElement("preview",200,400,25,50);
/*	moveElement("preview",0,0,0,1); 
               //can also have those values initially 
*/ 
}

function moveElement(elementID,finalx,finaly,interval,steps) 
{	
	var item=document.getElementById(elementID);
	var currx=parseInt(item.style.left);
	var curry=parseInt(item.style.top);
	var xdist=finalx-currx;
	var ydist=finaly-curry;
	var xincr=xdist/steps;
	var yincr=ydist/steps;
	
	currx+=xincr;
	curry+=yincr;
	
	item.style.left=currx+"px";
	item.style.top=curry+"px";
	steps=steps-1;
	
	var mover=setTimeout("moveElement('preview',200,400,25,50)", interval);
}

!You should find a way to clear that timer at the end!