Busy Bee 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>Busy Bee</title>
<script type="text/javascript">
<!--
var the_timeout;

var the_coords = new Array("500:100","250:40","350:280","50:120","190:60","380:400","250:50","30:340","500:100");

// function getAnchors()
//    this function gets the two anchor points of a segment
//    of the path and then calls moveDiv() to move the 
//    DIV along that segment
//
function getAnchors(array_position)
{
  var first_anchor = the_coords[array_position];
  var second_anchor = the_coords[array_position+1];

  array_position++;
  if (array_position == the_coords.length-1)
  {
    array_position = 0;
  }

  moveDiv(array_position, first_anchor, second_anchor, 0, 0);

}


// function moveDiv()
//   this function moves the DIV along a segment of the path
//   based on the anchor points.  It will keep calling 
//   itself with a setTimeout() until the DIV is at the end 
//   of the segment
//
function moveDiv(array_position, anchor_one, anchor_two, 
                       horizontal_step_size, vertical_step_size)
{
  var the_style = getStyleObject("myDiv");
  if (the_style)
  {

    // get the first anchor
    //    
    var first_points = anchor_one.split(":");
    var first_left = parseInt(first_points[0]);
    var first_top = parseInt(first_points[1]);

    // get the second anchor
    //
    var second_points = anchor_two.split(":");
    var second_left = parseInt(second_points[0]);
    var second_top = parseInt(second_points[1]);

    // if we don't know the step sizes to move the DIV, figure them out
    //
    if ((horizontal_step_size == 0) && (vertical_step_size == 0))
    {
      horizontal_step_size = 
        getStepSize(anchor_one, anchor_two, 0);

      vertical_step_size = 
        getStepSize(anchor_one, anchor_two, 1);
   }

    // figure out the new coordinates
    //
    var new_left = first_left + horizontal_step_size;
    var new_top = first_top + vertical_step_size;

    // if we're at the end of the segment, set the coordinates to
    // move the DIV to the end
    //
    if (atEndOfPath(horizontal_step_size, second_left, new_left) 
       ||(atEndOfPath(vertical_step_size, second_top, new_top)))
    {
      new_left = second_left;
      new_top = second_top;
    }

    // add the px or don't, depending on the browser
    if (!document.layers) 
    {
      new_left = new_left + "px";
      new_top = new_top + "px";
    }

    // now actually move the DIV
    //
    the_style.left = new_left;
    the_style.top = new_top;
    
    // if we're at the end of the segment, get new anchors
    // otherwise, call moveDiv() again with a new starting point
    // along the segment
    //
    if ((parseInt(new_left) == parseInt(second_left)) && 
            (parseInt(new_top) == parseInt(second_top)))
    {
      getAnchors(array_position);
    } 
    else 
    {
      var new_anchor_one = new_left + ":" + new_top;

      var timeout_string = "moveDiv(" +
        array_position + ", '" + new_anchor_one + "', '" +
        anchor_two + "', " + horizontal_step_size + "," + 
        vertical_step_size + ");";

      the_timeout = setTimeout(timeout_string, 50);
    }
  }
}

// function getStepSize()
//  this figures out how much to move the DIV each time
//
function getStepSize(anchor_one, anchor_two, position)
{

  var first_points = anchor_one.split(":");
  var first_number = parseInt(first_points[position]);

  var second_points  = anchor_two.split(":");
  var second_number = parseInt(second_points[position]);

  var step_size = Math.round((second_number - first_number)/10);

  return step_size;
}

// function atEndOfPath()
//   if the DIV is about to be moved past the end point of
//   the segment, this will return true.  Otherwise, it will
//   return false.
//
function atEndOfPath(the_step_size, second_number, new_number)
{
    var the_end = false;

    if (((the_step_size > 0) && (new_number > second_number)) ||
        ((the_step_size < 0) && (new_number < second_number)))
   {
     the_end = true;
   }

   return the_end;
}


function getStyleObject(objectId) {
    // cross-browser function to get an object's style object given its
    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:500px;"><img src="bee_left.gif">
</div>
<br>
<a href="#" onClick="getAnchors(0); return false;">start moving!</a> <br>
<a href="#" onClick="clearTimeout(the_timeout); return false;">stop wandering</a>
</body>
</html>