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 12 of 12
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    animate the movement of cell content from one table to another.

    Hello,
    I am trying to move each cell content from one table to another table. I do not want to lose the value of each cells in table1, but just to show how I got table2
    from table1. I would like to show/animate the movement. So when the user clicks the button the data from table1 will scroll towards table2.
    I am new to HTML/javascript programming I really appreciate your help

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    // Animate (11-January-2010)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on specified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and liner.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Initialising the Script.
    //
    // The script is initialised by assigning an instance of the script to a variable.
    // e.g A = new zxcAnimate('left','id1')
    // where:
    //  A           = a global variable                                                               (variable)
    //  parameter 0 = the mode(see Note 1).                                                           (string)
    //  parameter 1 = the unique ID name or element object.                                           (string or element object)
    //  parameter 1 = the initial value.                                                              (digits, default = 0)
    
    // **** Executing the Effect
    //
    // The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
    // where:
    //  A           = the global referencing the script instance.                                 (variable)
    //  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
    //  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
    //  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
    //  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
    //                 field 0 the minimum value. (digits)
    //                 field 1 the maximum value. (digits)
    //  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
    //                 'sin' progression starts fast and ends slow.
    //                 'cos' progression starts slow and ends fast.
    //
    //  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //  Note 2:  The default units(excepting opacity) are 'px'.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  The scale is of particular use when re-calling the effect
    //           in mid progression to retain an constant rate of progression.
    //  Note 4:  The current effect value is recorded in A.data[0].
    //  Note 5:  A function may be called on completion of the effect by assigning the function
    //           to the animator intance property .Complete.
    //           e.g. [instance].Complete=function(){ alert(this.data[0]); };
    //
    
    
    
    // **** Functional Code(1.52K) - NO NEED to Change
    
    function zxcAnimate(mde,obj,srt){
     this.to=null;
     this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
     this.mde=mde.replace(/\W/g,'');
     this.data=[srt||0];
     return this;
    }
    
    zxcAnimate.prototype={
    
     animate:function(srt,fin,ms,scale,c){
      clearTimeout(this.to);
      this.time=ms||this.time||0;
      this.neg=srt<0||fin<0;
      this.data=[srt,srt,fin];
      this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
      this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
      this.inc=Math.PI/(2*this.mS);
      this.srttime=new Date().getTime();
      this.cng();
     },
    
     cng:function(){
      var oop=this,ms=new Date().getTime()-this.srttime;
      this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
      this.apply();
      if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
      else {
       this.data[0]=this.data[2];
       this.apply();
       if (this.Complete) this.Complete(this);
      }
     },
    
     apply:function(){
      if (isFinite(this.data[0])){
       if (this.data[0]<0&&!this.neg) this.data[0]=0;
       if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
       else zxcOpacity(this.obj,this.data[0]);
      }
     }
    
    }
    
    function zxcOpacity(obj,opc){
     if (opc<0||opc>100) return;
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    
    </script>
    
    </head>
    
    <body>
    <table id="T1" border="1">
      <tr>
        <td>Some Text<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" alt="Img" width="30" height="30" /></td>
        <td>Some Text<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" alt="Img" width="30" height="30" /></td>
      </tr>
    </table>
    
    <table id="T2" border="1" style="position:absolute;left:300px;top:300px;">
      <tr>
        <td>Some Text</td>
        <td>Some Text</td>
      </tr>
    </table>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function MoveCell(o){
     var t1=document.getElementById(o.Table1ID),t2=document.getElementById(o.Table2ID),cells=t1.getElementsByTagName('TD'),z0=0,div=document.createElement('DIV');
     for (;z0<cells.length;z0++){
      this.addevt(cells[z0],'mouseup','move',cells[z0]);
      cells[z0].style.cursor='pointer';
      cells[z0].style.backgroundColor='red';
     }
     div.style.position='absolute';
     div.style.zIndex='101';
     this.div=div;
     this.t2=t2;
     this.ms=o.AnimationSpeed||1000;
     this.moveX=new zxcAnimate('left',div);
     this.moveY=new zxcAnimate('top',div);
    }
    
    MoveCell.prototype={
    
     move:function(cell){
      var div=this.div.cloneNode(false),srt=this.pos(cell),fin=this.pos(this.t2);
      div.innerHTML=cell.innerHTML;
      document.body.appendChild(div);
      this.moveX.obj=div;
      this.moveX.animate(srt[0],fin[0],this.ms);
      this.moveY.obj=div;
      this.moveY.animate(srt[1],fin[1],this.ms);
    },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
     }
    
    
    }
    
    new MoveCell({
     Table1ID:'T1',
     Table2ID:'T2',
     AnimationSpeed:1000
    });
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    Thanks a lot for answer my question. I'll look into it. Thanks.

  • #4
    New Coder
    Join Date
    Jan 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hello,
    It works but when I tried to understand the code, I couldn't understand it b'coz I am very new to HTML/Javascript. So this is my example code I am working on to understand the movement/animation. Can you please let me know what is the mistake I am doing and how can I animate the move without losing the value in table1. Also my table 1 and 2 are big, the the movement will be inside the for loop and will have a scroll bar for each table.
    So I have to find the exact position in table2 for each of the table1 values.
    Thank you so much.


    <html>
    <head>
    <style>
    div { position:relative;
    }
    </style>
    <title>Animating Text</title>
    <SCRIPT LANGUAGE="JavaScript" type = "text/javascript">
    var pos1 = 0,t=0;

    function f() {
    pos1 += 5;
    if (pos1 >120)
    pos1 = clearTimeout(t);
    document.getElementById("movetext").style.left
    = pos1;
    t=window.setTimeout("f();",30);
    }
    </SCRIPT>
    </head>
    <body onLoad="f();">
    <table border=1>
    <tr><td>
    <table border=1>

    <tr ><Td> <div id="movetext">
    row1</div></td><td>row2</td></tr>
    </table></td><td>
    <table border=1 >

    <tr ><Td width=80> he</td><td id='t2' width=80></td></tr>
    </table></td></tr>
    </body>
    </html>

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <html>
    <head>
    <style>
    div { position:relative;
    }
    </style>
    <title>Animating Text</title>
    <SCRIPT  type = "text/javascript">
    var pos1 = 0,t=0;
    
    function f() {
     pos1 += 5;
     clearTimeout(t);
     document.getElementById("movetext").style.left= pos1+'px';
     if (pos1 <120){
      t=window.setTimeout("f();",30);
     }
    }
    </SCRIPT>
    </head>
    <body onLoad="f();">
    <table border=1>
    <tr><td>
    <table border=1>
    
    <tr ><Td> <div id="movetext">
    row1</div></td><td>row2</td></tr>
    </table></td><td>
    <table border=1 >
    
    <tr ><Td width=80> he</td><td id='t2' width=80></td></tr>
    </table></td></tr>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    New Coder
    Join Date
    Jan 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This is the same code I posted, which moves the value of the cell but the value is not copied to the table2 but it is moved from table1. So the value is lost in table1. So in this code I just moved left but actually I'll have to find the exact position in table2 and move the value of table 1.
    Thanks for your help.

  • #7
    New Coder
    Join Date
    Jan 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Can anyone pls help with this problem

  • #8
    New Coder
    Join Date
    Jan 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Still need help, please anyone.

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    a cell is being moved to Table 2 what cell of Table 2 do you want the value(I think you are refering to the innerHTML) copied to?
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #10
    New Coder
    Join Date
    Jan 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes, I want the value (row1) to be moved to table 2, which I am able to do it. But my problem is that the table1 is losing the value(row1). I want the value(row1) to be moved to table2 without losing the value in table1. I want to show how I am going to create a table2 using the values of table1(without losing the table1 contents). Thanks a lot for responding. I appreciate any help.

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <html>
    <head>
    <style>
    div { position:relative;
    }
    </style>
    <title>Animating Text</title>
    <SCRIPT  type = "text/javascript">
    var pos1 = 0,t=0;
    
    function f(fid,tid,srt) {
     pos1+= 5;
     if (srt){
      fid=document.getElementById(fid);
      var obj=document.createElement('DIV');
      obj.style.position='absolute';
      obj.style.left=zxcPos(fid)[0]+'px';
      obj.style.top=zxcPos(fid)[1]+'px';
      obj.innerHTML=fid.innerHTML
      document.body.appendChild(obj);
      fid=obj
     }
     clearTimeout(t);
     var to=document.getElementById(tid);
     fid.style.left= pos1+'px';
     pos1+= 5;
     if (pos1<zxcPos(to)[0]){
      t=window.setTimeout(function(){ f(fid,tid); },30);
     }
     else {
      fid.style.position='static';
      to.appendChild(fid);
     }
    }
    
    function zxcPos(obj){
     var rtn=[0,0];
     while(obj){
      rtn[0]+=obj.offsetLeft;
      rtn[1]+=obj.offsetTop;
      obj=obj.offsetParent;
     }
     return rtn;
    }
    
    
    </SCRIPT>
    </head>
    <body onLoad="f('movetext','t2',true);">
    <table border=1>
     <tr>
      <td>
       <table border=1>
        <tr >
         <td>
          <div id="movetext" >
           row1
          </div>
         </td>
         <td>
          row2
         </td>
        </tr>
       </table>
      </td>
      <td>
       <table border=1 >
        <tr >
         <td width=80>
          he
         </td>
         <td id='t2' width=80>
         </td>
        </tr>
        </table>
       </td>
     </tr>
    </table>
    
    </body>
    </html>
    Last edited by vwphillips; 02-08-2011 at 05:24 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    jv123 (02-13-2011)

  • #12
    New Coder
    Join Date
    Jan 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks a lot.


  •  

    Posting Permissions

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