Square Dance Example Source


// Copyright © 2002 by Apple Computer, Inc., All Rights Reserved.
//
// You may incorporate this Apple sample code into your own code
// without restriction. This Apple sample code has been provided "AS IS"
// and the responsibility for its operation is yours. You may redistribute
// this code, but you are not permitted to redistribute it as
// "Apple sample code" after having made changes.

<html><head><title>Square Dance</title>
<script type="text/javascript">
<!--

var the_timeout;
var the_coords = new Array("100:100","140:100","180:100","220:100","220:140","220:180","220:220","180:220","140:220","100:220","100:180","100:140");

function moveDiv(array_position)
{
  // get the style sheet
  //
  var the_style = getStyleObject('myDiv');
  if (the_style)
  {
    // go to the next point in the array
    //
    array_position = array_position + 1;
    
    // if we've gone past the end of the array, start
    // at position 0
    //
    if (array_position >= the_coords.length) {
      array_position = 0;
    }
    
    // turn the point "120:100" into an array of two
    // elements: the left and the top
    //
    var next_point = the_coords[array_position];
    var the_points = next_point.split(":");
    var left = the_points[0];
    var top = the_points[1];

    // now set the left and top
    // properties appropriately
    //
    if (!document.layers) 
    {
      left = left + "px";
      top = top + "px";
    }
    the_style.left = left;
    the_style.top = top;

    // and call moveDiv() again, with the current array position
    //
    the_timeout = setTimeout('moveDiv(' + array_position + ')',100);
  }
}


function getStyleObject(objectId) {
    // cross-browser function to get an object's style object given its id
    if(document.getElementById && document.getElementById(objectId)) {
	// W3C DOM
	return document.getElementById(objectId).style;
    } else if (document.all && document.all(objectId)) {
	// MSIE 4 DOM
	return document.all(objectId).style;
    } else if (document.layers && document.layers[objectId]) {
	// NN 4 DOM.. note: this won't find nested layers
	return document.layers[objectId];
    } else {
	return false;
    }
} // getStyleObject

      
// -->
</script>
</head>
<body>
<div id = "myDiv" style="position:absolute; top:100px; left:100px;"><img src="bee_right.gif">
</div>
<br>
<a href="#" onClick="the_timeout=setTimeout('moveDiv(0);',100); return false;">start moving!</a> <br> 
<a href="#" onClick="clearTimeout(the_timeout); return false;">stop wandering</a>
</body>
</html>