Slow Movement of Elements

To animate an element, it must be moved by small amounts, many times, in rapid succession
JavaScript has two ways to do this, but we cover just one:
```
setTimeout("fun()", n)
```
Example: move a text element from its initial position (100, 100) to a new position (600, 600)
- Use the onload attribute of the body element to initialize the position of the element
- Use a move function to change the top and left attributes by one pixel in the direction of the destination
- A problem: coordinate properties are stored as strings, which include the units ("150px")
- Another problem: We need to use some HTML special characters ('<' and '--')
  1. XML parsers may remove all comments
  2. Put the script in a CDATA section
  3. Put JavaScript in separate file
  - These are problems of validation only
  - IE9, FX3, and Chrome deal correctly with comments

Jump in the lake!

// This is moveText.js - used with moveText.html 

   var dom, x, y, finalx = 600, finaly = 600;

// ************************************************* //
// A function to initialize the x and y coordinates
//  of the current position of the text to be moved,
//  and then call the mover function 

   function initText() {
      dom = document.getElementById('theText').style;

   /* Get the current position of the text */

      var x = dom.left;
      var y = dom.top;

   /* Convert the string values of left and top to 
      numbers by stripping off the units */

      x = x.match(/\d+/);
      y = y.match(/\d+/);

   /* Call the function that moves it */

      moveText(x, y);
   } /*** end of function initText */

// ************************************************* //
// A function to move the text from its original
//  position to (finalx, finaly)

   function moveText(x, y) {

   /* If the x coordinates are not equal, move
       x toward finalx */

      if (x != finalx) 
         if (x > finalx) x--;
         else if (x < finalx) x++;
    
   /* If the y coordinates are not equal, move
       y toward finaly */

      if (y != finaly) 
         if (y > finaly) y--;
         else if (y < finaly) y++;

   /* As long as the text is not at the destination,
       call the mover with the current position */
         
      if ((x != finalx) || (y != finaly)) { 

   /* Put the units back on the coordinates before
      assigning them to the properties to cause the 
      move */

         dom.left = x + "px";
         dom.top = y + "px";

   /* Recursive call, after a 1-millisecond delay */

         setTimeout("moveText(" + x + "," + y + ")", 1);  
      } 
    
    } /*** end of function moveText */

<!DOCTYPE html>
<!-- moveText.html
     Illustrates a moving text element
     Uses the JavaScript from file moveText.js
     -->
<html lang = "en">
  <head>
    <title> Moving text </title>
    <meta charset = "utf-8" />
    <style type = "text/css">
      #theText {position: absolute; left: 100px; top: 100px;
                font: bold 1.7em 'Times Roman';
                color: blue;"> Jump in the lake!;}
    </style>
    <script type = "text/javascript"  src = "moveText.js">
    </script>
  </head>

<!-- Call the initializing function on load, giving the 
      destination coordinates for the text to be moved
      -->

  <body onload = "initText()">

<!-- The text to be moved -->
    <p>
      <span id = 'theText'> Jump in the lake!
      </span>
    </p>
  </body>
</html>