Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts

    moving multiple elements at the same time.

    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.
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,468
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Just did this

    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/
    
    // 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>

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,468
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Improved code

    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •