EIW Fall 2005 JavaScript Example: animation

<html>
<head>
 <title>Javascript Animation</title>
</head>
<body>


<p id=txt style="font-family:arial,sans-serif;
           font-size:24pt;
           color:blue;
           position:absolute;
           left:100;
           top:100;
           width:200">
Moving text</p>



<script>

// Create a global variable that is the div 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
var increment = 2.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() {
   window.clearInterval(intervalID);
   intervalID = window.setInterval("across();",speed);
}

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



// start
//window.setInterval("circle();",speed);

</script>

<input type=button onClick="start_across();" value="Across">

<input type=button onClick="start_circle();" value="Circle">

</body>
</html>