Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Animation problem.

  1. #1
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Animation problem.

    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.

  2. #2
    Join Date
    Feb 2007
    Location
    🌎
    Posts
    528
    Thanks
    10
    Thanked 10 Times in 10 Posts
    Blog Entries
    2

    Default

    I think you should see this.
    ....(o_ Penguins
    .---/(o_- techno_racing
    +(---//\-' in
    .+(_)--(_)' The McMurdo 500

  3. #3
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Only works in IE.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by shachi View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    jscheuer1: unfortunately, I don't have IE.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #8
    Join Date
    Feb 2007
    Location
    🌎
    Posts
    528
    Thanks
    10
    Thanked 10 Times in 10 Posts
    Blog Entries
    2

    Default

    Hmm. Does it have to be exact coordinates or a certain area on the page?
    ....(o_ Penguins
    .---/(o_- techno_racing
    +(---//\-' in
    .+(_)--(_)' The McMurdo 500

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

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