60 users online (1 members and 59 guests)  

Thread: Moving elements


  Results 1 to 5 of 5

Related

  1. If condition for moving to another page    Forum: PHP Forum
    Replies: 1
  2. Moving Site (maybe)    Forum: Graphics Forum
    Replies: 1
  3. Moving Stuff?    Forum: Myspace Forum
    Replies: 0
  4. moving navigation bar    Forum: Website Scripts Forum
    Replies: 1
  5. Block elements within inline elements    Forum: CSS Forum
    Replies: 6
  1. #1
    adamsen's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Jan 2009
    Location
    Denmark
    Posts
    128

    Moving elements

    Hi, Iīve made a DHTML-script which makes it posible to make a element move, using the W, D, S and A keys. It works fine, but when you stop pressing a button, and when you press a new, nothing happens. If you press the button again, the element will start moving again. Can anybody read my code, and tell me how to fix that? I couldnīt attach it, it says that there was an invalid file?!? Itīs uploaded on: www.freewebs.com/midowebsite/tests/animation

    Code:
    HTML Code:
    <html>
    <head><style type="text/css">.xbutton {width:40px;heigth:40px;z-index:3;position:relative;z-index:3;}</style></head>
    <body onload="init()" scroll="no">
    
    <div onclick="move()" id="infoboxObject" style="display:block;position:relative;top:30px;left:30px;
    border:1px solid black;width:20px;height:20px;background-color:lime;text-align:center;z-index:2;opacity:0.9;filter:alpha(opacity=90)"></div>
    
    
    
    <form id="myForm">
    <input style="position:absolute;top:0px;left:0px;height:100%;z-index:1;border:none;width:100%;opacity:0.0;filter:alpha(opacity=0");" value="..." size="3" tabindex="1" maxlength="3" onmouseover="checkLen(this,this.value)">
    <input style="position:absolute;z-index:2;top:20px;left:20px;width:100px;z-index:2;opacity:0.0;filter:alpha(opacity=0);top:-100px;"  size="2" tabindex="2"   onkeydown="return getKey(event)" onkeyup="stopMoving()">
    
    <script type="text/javascript">
    speed = 1;
    angle = 270;
    firsttime = 1;
    var infobox = null; // object
    var ableToMove = 1;
    var moving = 0;
    var alreadyMoving = 0;
    var stopped = 1;
    function changeSpeedAndAngle(newSpeed,newAngle)
    {
    ableToMove = 1;
    speed = newSpeed;
    angle = newAngle;
    
    if (firsttime==1)
    {
    move();
    }
    
    firsttime = 0;
    }
    
    
     
    function move() 
    {
    
    alreadyMoving = 1;
    stopped = 0;
    
    if (ableToMove==1)
    {
    
    if (angle==0)
    {
    infobox.style.left = parseInt(infobox.style.left)+speed+'px';
    setTimeout(move,20);
    }
    else if (angle==90)
    	 {
    	 infobox.style.top = parseInt(infobox.style.top)-speed+'px';
    	 setTimeout(move,20);
    	 alreadyMoving = 1;
    	 }
    	 else if (angle==180)
    		  {
    		  infobox.style.left = parseInt(infobox.style.left)-speed+'px';
    		  setTimeout(move,20);
    		  alreadyMoving = 1;
    		  }
    		  else if (angle==270)
    			   {
    			   infobox.style.top = parseInt(infobox.style.top)+speed+'px';
    			   setTimeout(move,20);
    			   }
    	
      }
    }
    
     
    function init() {
      infobox = document.getElementById('infoboxObject');
      infobox.style.left = '300px';
      infobox.style.top = '200px'; 
      
    }
    
    
    
    
    
    function checkLen(x,y)
    {
    if (y.length==x.maxLength)
      {
      var next=x.tabIndex;
      if (next<document.getElementById("myForm").length)
        {
        document.getElementById("myForm").elements[next].focus();
        }
      }
    }
    
    
    function getKey(e)
    {
    var keynum;
    ableToMove = 1;
    var numcheck;
    
    if(window.event) // IE
    	{
    	keynum = e.keyCode;
    	}
    else if(e.which) // Netscape/Firefox/Opera
    	{
    	keynum = e.which;
    	}
    
    numcheck = /\d/;
    
    if (keynum==87)
    {
    changeSpeedAndAngle(3,90)
    }
    
    if (keynum==68)
    {
    changeSpeedAndAngle(3,0)
    }
    
    if (keynum==83)
    {
    changeSpeedAndAngle(3,270)
    }
    
    if (keynum==65)
    {
    changeSpeedAndAngle(3,180)
    }
    
    
    if (stopped==1&&alreadyMoving==0)
    {move();}
    else if (alreadyMoving==0)
    {move();}
    
    }
    
    
    function stopMoving()
    {
    ableToMove = 0;
    alreadyMoving = 0;
    stopped = 1;
    }
    
    
    
    </script>
    
    
    
    
    
    
    
    
    </body>
    </html>
    Last edited by HTML; 03-08-2012 at 05:09 PM.

  2. #2
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: Moving elements

    I am not certain the exact problem, however, it looks to me like the following lines are being skipped over:

    Code:
    speed = 1;
    angle = 270;
    firsttime = 1;
    Try changing them to:

    Code:
    var speed = 1;
    var angle = 270;
    var firsttime = 1;

  3. #3
    adamsen's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Jan 2009
    Location
    Denmark
    Posts
    128

    Re: Moving elements

    Well nothing happens when you changes them.
    The problem is, that you canīt just move the element using the keys, every time you have to change direction, you will have to press the key two times. Well, thats the way it does on my computer, I donīt know how it works on yours. Iīm using IE8.

  4. #4
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: Moving elements

    You did not change those lines (or you changed them back), and they are still being skipped. This means that the variables are not getting initialized. I believe this is at least part of the problem. My browser is having the same issues you mentioned about changing directions.

  5. #5
    adamsen's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Jan 2009
    Location
    Denmark
    Posts
    128

    Re: Moving elements

    You are rigth, I changed them back again, because it didnīt made any difference. Do you know a script that can animate an element, so it moves to another set coordinates?



Tags for this Thread