...

View Full Version : moving multiple elements at the same time.



rlemon
01-19-2006, 06:14 PM
I need to move multiple 'div' elements to multiple locations on the page at the same time.

i've attempted to simply run through a loop using window.setTimeout() however that does not work. all elements 'pause' in their start position then 'jump' to the location.

if i attmept to move a single element it's fine. however i have a multi-dimensional array full of elements.

does anyone know of a good tutorial that describes how to go about doing this? i just need the logic - i can write the code. however if anyone has any code they can provide as an example i will not object.

If you would like a little more detail about the specific project let me know and i can elaborate.

Mr J
01-19-2006, 07:59 PM
I have a few examples that may put you on the right path.

Take a look in the CSS & Scripts section for Multi Animation and the Preset Scroll examples.

Click my link below

vwphillips
01-19-2006, 08:24 PM
Just did this


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Move Objects (19-Jan-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// zxcMoveTo('Tst1',400,300,4,50);
// parameter 0 - the object or the ID of the object to move (object or string ID)
// parameter 1 - the new Horizontal(X) position (digits)
// parameter 2 - the new Vertical(Y) position (digits)
// parameter 3 - optional the move increment (digits)
// parameter 4 - optional the move delay (digits)


var zxcCnt=0;
var TO;

function zxcMoveTo(zxcobj,zxcx,zxcy,zxcinc,zxcdly){
if (typeof(zxcobj)=='string'){ var zxcobj=document.getElementById(zxcobj); }
if (!zxcobj.oop){
zxcobj.oop=new zxcOOPMove(zxcobj);
zxcobj.oop.inc=zxcinc||1;
zxcobj.oop.dly=zxcdly||100;
}
if (zxcobj.oop.stop){ zxcobj.oop.stop=false; }
else { zxcobj.oop.stop=true; }
zxcobj.oop.inc=zxcinc||zxcobj.oop.inc;
zxcobj.oop.dly=zxcdly||zxcobj.oop.dly;
clearTimeout(zxcobj.oop.to);
zxcobj.spos=[zxcPos(zxcobj)[0],zxcPos(zxcobj)[1]];
zxcobj.fpos=[zxcx,zxcy];
zxcobj.style.position='absolute';
zxcobj.style.left=zxcobj.spos[0]+'px';
zxcobj.style.top=zxcobj.spos[1]+'px';
if (Math.abs(zxcobj.fpos[0]-zxcobj.spos[0])>Math.abs(zxcobj.fpos[1]-zxcobj.spos[1])){
zxcobj.xr=1;
zxcobj.yr=Math.abs(zxcobj.fpos[0]-zxcobj.spos[0])/Math.abs(zxcobj.fpos[1]-zxcobj.spos[1]);
}
else {
zxcobj.yr=1;
zxcobj.xr=Math.abs(zxcobj.fpos[1]-zxcobj.spos[1])/Math.abs(zxcobj.fpos[0]-zxcobj.spos[0]);
}
zxcObj=zxcobj;
zxcobj.xpol=1;
zxcobj.ypol=1;
if (zxcobj.fpos[0]<zxcobj.spos[0]){ zxcobj.xpol=-1; }
if (zxcobj.fpos[1]<zxcobj.spos[1]){ zxcobj.ypol=-1; }
zxcobj.oop.move();
}

function zxcOOPMove(zxcm){
this.obj=zxcm;
this.to=null;
this.ref='zxcoopmove'+zxcCnt;
window[this.ref]=this;
this.delay=100;
this.stop=true;
zxcCnt++;
}

zxcOOPMove.prototype.move=function(){
if (this.stop){ return; }
this.obj.style.left=(this.obj.spos[0]+=(this.inc/this.obj.xr*this.obj.xpol))+'px';
this.obj.style.top=(this.obj.spos[1]+=(this.inc/this.obj.yr*this.obj.ypol))+'px';
if ((parseInt(this.obj.style.left)<this.obj.fpos[0]&&this.obj.xpol>0)||(parseInt(this.obj.style.left)>this.obj.fpos[0]&&this.obj.xpol<0)){
this.setTimeOut("move();",this.dly);
}
else {
this.obj.style.left=(this.obj.fpos[0])+'px';
this.obj.style.top=(this.obj.fpos[1])+'px';
this.obj.lock=false;
}
}

zxcOOPMove.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
}

function zxcPos(zxc){
zxcObjLeft = zxc.offsetLeft;
zxcObjTop = zxc.offsetTop;
while(zxc.offsetParent!=null){
zxcObjParent=zxc.offsetParent;
zxcObjLeft+=zxcObjParent.offsetLeft;
zxcObjTop+=zxcObjParent.offsetTop;
zxc=zxcObjParent;
}
return [zxcObjLeft,zxcObjTop];
}

//-->
</script></head>

<body>

</body>

<br>
<br>
Click the button or Red or Green Object
<br><br>

<input type="button" name="" value="Move 400*300" onclick="zxcMoveTo('Tst1',400,300,4,50);zxcMoveTo('Tst2',400,300,1,200);">
<div id="Tst1" style="position:relative;left:620px;width:50px;height:50px;background-color:red;"
onclick="zxcMoveTo(this,100,100,1,10);"
>100*100</div>
<div id="Tst2" style="position:relative;left:20px;width:50px;height:50px;background-color:green;"
onclick="zxcMoveTo(this,200,100,1,50);"
>200*100</div>
</html>

vwphillips
01-19-2006, 09:37 PM
Improved code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Move Objects (19-Jan-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// Move an element to a new specified or anchor position.
// Activated by an event call.
// Move one or as many elements as required at a speed
// determined by the specified move increment and delay

// Application Notes

// Activated by an event call.
// The element style position is forced to absolute on calling the script

// Example 1 - The element must have a unique ID name
// <input type="button" name="" value="Move 400*300" onclick="zxcMoveTo('Tst1',[400,300],4,50);zxcMoveTo('Tst2',[400,300],1,200);">

// Example 2 - The element does not need a unique ID name
// <div id="Tst1" style="position:absolute;left:620px;top:100px;width:50px;height:50px;background-color:red;"
// onclick="zxcMoveTo(this,[100,100],1,10);"></div>

// Example 3 - To an Anchor Position - The element and anchor must have a unique ID names
// <input type="button" id="fred" value="Move to this Position" onclick="zxcMoveTo('Tst1','fred',4,50);zxcMoveTo('Tst2','fred',1,200);">

// The Call Parameters
// Specified Position - zxcMoveTo('Tst1',400,300,4,50);
// Anchor Position - zxcMoveTo('Tst1','AnchorID',4,50);
// parameter 0 - the object or the unique ID name of the object to move (object or string ID)
// parameter 1 - Specified Position
// An array of new X and Y positions
// field 0 - new Horizontal(X) position (digits)
// field 1 - new Vertical(Y) position (digits)
// parameter 1 - Anchor Position
// the unique ID name of the anchor element (string)
// parameter 2 - (optional) the move increment or default (digits)
// default is set by customising variable zxcDefaultIncrement
// the last value is retained until changed
// parameter 3 - (optional) the move delay or default (digits)
// default is set by customising variable zxcDefaultDelay
// the last value is retained until changed

// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
// These charactors may be changed to charactors of choise using global find and replace

// The Functional Code(about 2.5K) is best as an External JavaScript

// Tested with IE6 and Mozilla FireFox

// Customising Variables

var zxcDefaultIncrement=5; // (digits)
var zxcDefaultDelay=30; // (digits)



// Functional Code - No Need to Change

var zxcOOPCnt=0;

function zxcMoveTo(zxcobj,zxcnewpos,zxcinc,zxcdly){
if (typeof(zxcobj)=='string'){ var zxcobj=document.getElementById(zxcobj); }
if (typeof(zxcnewpos)=='string'){
var zxcpobj=document.getElementById(zxcnewpos);
zxcnewpos=[zxcPos(zxcpobj)[0],zxcPos(zxcpobj)[1]];
}
if (!zxcobj.oop){
zxcobj.oop=new zxcOOPMove(zxcobj);
zxcobj.oop.inc=zxcinc||zxcDefaultIncrement;
zxcobj.oop.dly=zxcdly||zxcDefaultDelay;
}
clearTimeout(zxcobj.oop.to);
if (zxcobj.oop.stop){ zxcobj.oop.stop=false; }
else { zxcobj.oop.stop=true; }
zxcobj.oop.inc=zxcinc||zxcobj.oop.inc;
zxcobj.oop.dly=zxcdly||zxcobj.oop.dly;
zxcobj.spos=[zxcPos(zxcobj)[0],zxcPos(zxcobj)[1]];
zxcobj.fpos=[zxcnewpos[0],zxcnewpos[1]];
zxcobj.style.position='absolute';
zxcobj.style.left=zxcobj.spos[0]+'px';
zxcobj.style.top=zxcobj.spos[1]+'px';
zxcobj.xr=1; zxcobj.yr=1;
if (Math.abs(zxcobj.fpos[0]-zxcobj.spos[0])>Math.abs(zxcobj.fpos[1]-zxcobj.spos[1])){
zxcobj.yr=Math.abs(zxcobj.fpos[0]-zxcobj.spos[0])/Math.abs(zxcobj.fpos[1]-zxcobj.spos[1]);
}
else {
zxcobj.xr=Math.abs(zxcobj.fpos[1]-zxcobj.spos[1])/Math.abs(zxcobj.fpos[0]-zxcobj.spos[0]);
}
if (isNaN(zxcobj.xr)){ zxcobj.xr=1; }
if (isNaN(zxcobj.yr)){ zxcobj.yr=1; }
zxcobj.xpol=1; zxcobj.ypol=1;
if (zxcobj.fpos[0]<zxcobj.spos[0]){ zxcobj.xpol=-1; }
if (zxcobj.fpos[1]<zxcobj.spos[1]){ zxcobj.ypol=-1; }
zxcobj.oop.move();
}

function zxcOOPMove(zxcm){
this.obj=zxcm;
this.to=null;
this.ref='zxcoopmove'+zxcOOPCnt;
window[this.ref]=this;
this.stop=true;
zxcOOPCnt++;
}

zxcOOPMove.prototype.move=function(){
if (this.stop){ return; }
this.obj.style.left=(this.obj.spos[0]+=(this.inc/this.obj.xr*this.obj.xpol))+'px';
this.obj.style.top=(this.obj.spos[1]+=(this.inc/this.obj.yr*this.obj.ypol))+'px';
if ((parseInt(this.obj.style.left)<this.obj.fpos[0]&&this.obj.xpol>0)||(parseInt(this.obj.style.left)>this.obj.fpos[0]&&this.obj.xpol<0)){
this.setTimeOut("move();",this.dly);
}
else {
this.obj.style.left=(this.obj.fpos[0])+'px';
this.obj.style.top=(this.obj.fpos[1])+'px';
this.stop=true;
}
}

zxcOOPMove.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
}

function zxcPos(zxc){
zxcObjLeft = zxc.offsetLeft;
zxcObjTop = zxc.offsetTop;
while(zxc.offsetParent!=null){
zxcObjParent=zxc.offsetParent;
zxcObjLeft+=zxcObjParent.offsetLeft;
zxcObjTop+=zxcObjParent.offsetTop;
zxc=zxcObjParent;
}
return [zxcObjLeft,zxcObjTop];
}

//-->
</script>

</head>

<body>

</body>

<br>
<br>
Click the button or Red or Green Object
<br><br>

<input type="button" name="" value="Move 400*300" onclick="zxcMoveTo('Tst1',[400,300],4,50);zxcMoveTo('Tst2',[400,300]);">
<div id="Tst1" style="position:absolute;left:620px;top:100px;width:100px;height:50px;background-color:red;"
onclick="zxcMoveTo(this,[100,100],1,10);"
>100*100</div>
<div id="Tst2" style="position:absolute;left:20px;top:450px;width:100px;height:50px;background-color:green;"
onclick="zxcMoveTo(this,[200,100],1,50);"
>200*100</div>
<br>
<br>
<br>
<br>
<input type="button" id="fred" value="Move to this Position" onclick="zxcMoveTo('Tst1','fred',4,50);zxcMoveTo('Tst2','fred',1,200);">

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum