Animation problem.

**shachi** · 04-20-2007, 07:19 PM

Hello all,

I am trying to create a function that smoothly moves an element to the given x & y coordinates but unfortunately all my attempts have been in vain. I'd be very appreciated if anyone can point me in the right direction.

Thank you all.

**techno_race** · 04-20-2007, 10:05 PM

I think you should see this.

**shachi** · 04-21-2007, 06:51 AM

Only works in IE.

**jscheuer1** · 04-21-2007, 07:10 AM

Originally Posted by shachi

Only works in IE.

Not actually, the wizard only works in IE. The generated code is cross browser (in quirks-mode - no DOCTYPE). By adding the px designation here in the generated code:

Code:

function moveTo(x,y)
	{
		if(dom||ie)
			{
				this.x=x;
				this.y=y;
				this.css.left=x+'px';
				this.css.top=y+'px';
			}
		else this.css.moveTo(x,y);
	} . . .

It will also work cross browser with a DOCTYPE.

**shachi** · 04-21-2007, 07:30 AM

jscheuer1: unfortunately, I don't have IE.

**jscheuer1** · 04-21-2007, 08:34 AM

How about Opera 9.01? Some other recent Opera release? The wizard works in that browser too. Still needs the +'px' fixes to the output noted earlier for use with a DOCTYPE.

**shachi** · 04-21-2007, 11:20 AM

jscheuer1: I am not allowed to install anything here. But anyways, here's what I came up with:

Code:

<html>
<head>
<script type="text/javascript">
window.onload = init;

var testEl;
var timeout;
var ntimeout;

function init(){
initEl();
initExtra();
}

function initEl(){
testEl = get("test");
textEl = get("text");
}

function initExtra(){

}

function move(t, l){
clearTimeout(timeout);
var defT = parseInt(testEl.offsetTop);
var defL = parseInt(testEl.offsetLeft);
if(defT < t){
testEl.style.top = defT + 3 + "px";
}
//var pointY = (defT < t) ? defT + 3 : defT - 3;
//testEl.style.top = pointY;
if(defL < l){
testEl.style.left = defL + 3 + "px";
}
timeout = setTimeout("move("+t+", "+l+")", 10);
}

function get(el){
return document.getElementById(el);
}

Object.prototype.move = function(t, l){
clearTimeout(timeout);
var defT = parseInt(this.offsetTop);
var defL = parseInt(this.offsetLeft);
if(defT < t){
this.style.top = defT + 3 + "px";
} else if(defT == t){

}
if(defL < l){
this.style.left = defL + 3 + "px";
} else if(defL == l){

}
timeout = setTimeout("this.move("+t+", "+l+")", 10);
}

Object.prototype.resetPos = function(){
clearTimeout(timeout);
this.style.top = "";
this.style.left = "";
}

window.alert = function(text){
get("alert").innerHTML += text+"<br />";
}

</script>
<style type="text/css">
#test {
width: 10px;
height: 10px;
position: absolute;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="test"></div>
<div id="text"></div>
<div id="alert"></div>
</body>
</html>

The problem I am facing is that if you goto coordinates: 50,90(or any other) and try to come back to 0,0(or any other coordinate less than the previous) then it doesn't animate it back. Is there anyway to fix this issue?

Thanks everyone.

**techno_race** · 04-21-2007, 02:20 PM

Hmm. Does it have to be exact coordinates or a certain area on the page?

**jscheuer1** · 04-21-2007, 02:40 PM

That code doesn't work at all. Here is the generated code of one try at the wizard in Opera:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<body>

<body>

<!-- Important Notice ( Delete this after you read it )                                  -->
<!-- The layer used below is just a sample one to make the timeline run.                 -->
<!-- Delete it and paste your own layer in this place but make sure that                 -->
<!-- you change "sampleLayer" below and in the fifth line after the copyright message.   -->
<!-- End of Notice                                                                       -->

<!-- Sample Layer [Cut] -->
<div id=sampleLayer style="position:absolute; top:20px; left:15px; width:100px; height:100px; background:#EEEEEE; border: 1px solid #919191; font-family:Verdana; font-size:8pt">Sample Layer</div>
<!-- End of Sample layer -->

<script language=JavaScript>
//////////////////////////////////////////////////////////////////
//                      _pathGenerator v1.1                     //
//////////////////////////////////////////////////////////////////
//                                                              //
//  This JavaScript can be freely used as long as this message  //
//  stays here in the header of the script. Any modifications   //
//  and bugs found (and fixed) are appreciated.                 //
//                                                              //
//  Author : Svetlin Staev w/ changes by Dynamic Drive          //
//  Date   : 01/10/2001                                         //
//  Email  : svetlins@yahoo.com                                 //
//  Visit  : http://www.dynamicdrive.com for this script        //
//////////////////////////////////////////////////////////////////
var posX, posY;
var ie    = document.all?1:0;
var ns    = document.layers?1:0;
var dom   = document.getElementById?1:0;
var dhtml = new svetLayer("sampleLayer");
var path  = new Array(64,76,64,76,64,76,64,76,64,76,64,76,64,76,64,76,64,76,69,78,73,80,76,81,81,82,86,85,90,87,97,91,108,97,112,100,154,128,154,128,166,138,176,146,184,153,187,159,196,169,204,181,213,197,222,213,230,227,239,245,245,258,250,271,254,283,257,296,263,312,267,326,270,340,273,355,275,362,278,374,281,385,286,396,291,406,298,418,303,427,308,437,314,445,321,453,329,460,340,466,350,471,361,476,375,480,390,481,407,483,423,483,441,485,459,487,479,489,487,490,504,491,517,491,529,491,532,491,537,491,540,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491);
var index = 0;
var trNum = 0;
function svetLayer(id)
	{
		this.name = dom?document.getElementById(id):ie?document.all[id]:ns?document.layers[id]:null;
		if (this.name !== null)
			{
				this.css    = (dom||ie)?this.name.style:this.name;
				this.x      = dom?this.css.pixelLeft:ie?parseInt(this.css.left):this.css.left;
				this.y      = dom?this.css.pixelTop:ie?parseInt(this.css.top):this.css.top;
				this.moveTo = moveTo;
				return this;
			}
		else alert('Your layer does not exist');
	}

function moveTo(x,y)
	{
		if(dom||ie)
			{
				this.x=x;
				this.y=y;
				this.css.left=x+'px';
				this.css.top=y+'px';
			}
		else this.css.moveTo(x,y);
	}
function timeline()
	{
		if(trNum < (path.length-1))
			{
				dhtml.moveTo(path[trNum],path[trNum+1])
				trNum += 2;
				setTimeout('timeline()',10);
			}
		else trNum=0; 
	}
window.onload=timeline;
</script>


</body>
</html>

Maybe something in there would be of use.

**shachi** · 04-21-2007, 02:48 PM

techno_race: yes, exact coordinates.

jscheuer1: It works!! But unfortunately that's not what I was looking for. I guess I wasn't able to clear myself up. What I want is a function which can take a given x and y coordinates and move(animate) a certain element to the given coordinates.

Thread: Animation problem.

Thread Tools

Search Thread

Animation problem.

Bookmarks

Bookmarks

Posting Permissions