WebSys Fall 2006 JavaScript Example: animation

<html>
<head>
 <title>Javascript Animation</title>
 <style>
  button { font-family: arial,sans-serif;
           font-size: 14pt;
           width: 100px;
		   text-align:center;
		   border-color: black;
         }
  button.go { background-color: #88ee88; }
  button.stop { background-color: #ee8888; }
  button.speed { background-color: #eeeeee; }
  .lbl { font-family: Courier,fixed;
         font-weight: bold;
         font-size: 12pt;
         width: 100px;
		 background-color: #eeeeee;
		 border: solid black 1px;;
		 text-align:center;
       }
</style>
</head>
<body>
<!-- the paragrph that moves -->
<p id=txt style= "font-family:arial,sans-serif;
       font-size:36pt;
       color:blue;
       position:absolute;
       left:100;
       top:100;
       width:200;">
Moving text</p>


<script>

// Create a global variable that is the p tag 
var mytxt = document.getElementById("txt");

// set xpos, ypos to be the initial coordinates of the
//  position of mytxt

var xpos = mytxt.style.left;

// IE reports positions with units "px"
//  we need to get rid of this and make sure these are numbers.

xpos = xpos.replace(/px/,""); xpos=xpos*1.0;


// find out how wide the text is
var txtwidth = mytxt.style.width;
txtwidth=txtwidth.replace(/px/,""); txtwidth=txtwidth*1.0;


// this controls how far should we move each step
//   movement in pixels for across
//   degrees for circle
var increment = 1.0;

// this controls how often we move (in ms)
var speed=5;

// we need to know how wide,high the browser window is, there is
// not yet a way to do this for all browsers... So we need
// to find out what browser is being used.
var total_width;
var total_height;

if (window.innerWidth) {
     // this works with Netscape
     total_width = window.innerWidth;
     total_height = window.innerHeight;
} else {
    // this is for I.E.
    total_width = document.body.clientWidth;
    total_height=document.body.clientHeight;
}

// this determines the current direction of movement
//   1 means "positive" movement (to the right or down)
//  -1 means "negative" (left or up)
var xdirection=1;

// across bounces back and forth horizontally
function across() {
   var newx;

   // calculate new x position
   newx= xpos + increment*xdirection;

   // if the text is about to disapear to the left, change directions
   if (newx+increment*xdirection < 0) {
         xdirection = -xdirection;
    } else {
     // if the text is about to disapear to the right, change directions
     if (newx+txtwidth+increment*xdirection > total_width) {
        xdirection = -xdirection;
      }
   }

   // all set - now update the position of the text
   mytxt.style.left=newx;
   xpos=newx;
}

// variables needed only for the circle
var xcenter,ycenter,radius,angle;

xcenter = (total_width-txtwidth)/2;
ycenter = total_height/2;
radius = total_width/2-txtwidth;
angle=0;
// circles around the center
function circle() {
   var newx,newy;

   angle = angle+increment;

   newx = xcenter+Math.cos(angle*Math.PI/180.0)*radius;
   newy = ycenter+Math.sin(angle*Math.PI/180.0)*radius;

   // all set - now update the position of the text
   mytxt.style.left=newx;
   mytxt.style.top=newy;
}

// this global is used to record the id returned by
//   setInterval so we can stop a repeating program.

var intervalID;

function start_across() {
   hideSpeedButtons();
   window.clearInterval(intervalID);
   intervalID = window.setInterval("across();",speed);
}

function start_circle() {
   hideSpeedButtons();
   window.clearInterval(intervalID);
   intervalID = window.setInterval("circle();",speed);
}

function stop() {
   window.clearInterval(intervalID);
   showSpeedButtons();
}

function hideSpeedButtons() {
  r = document.getElementById("speedButtons");
  r.style.display="none";
}
function showSpeedButtons() {
  r = document.getElementById("speedButtons");
  r.style.display="table-row";
}

// update the speed label
function updateSpeed() {
  s = document.getElementById("theSpeed");
  s.innerHTML=speed + "ms/step";
}
</script>
<table style="border: solid black 2px; background-color: gray;">
<tr><td>
<button class=go onClick="start_across();">Across</button>
</td><td>
<button class=go onClick="start_circle();">Circle</button>
</td><td>
<button class=stop onClick="stop();">STOP</button>
</td></tr>
<tr id="speedButtons"><td>
<button class=speed onClick="if (speed>0) speed--; updateSpeed();">Faster</button>
</td><td>
<button class=speed onClick="speed++;updateSpeed();">Slower</button>
</td> <td><button  class=lbl id="theSpeed"></button></td>
</tr>
</table>
<script>
updateSpeed();
</script>
</body>
</html>