SiteSpinner Pages: Bouncing Ball

Bouncing Ball

October 28th, 2008

This is a silly little script I found at www.rewriteables.net that was originally written for Netscape 4 and IE4/5. In modifying it to work with modern browsers and SiteSpinner, I learned how to make a copy of an existing image via javascript and that Firefox and IE handle browser events differently. I have decided to post my experiment just in case you might need to do something like this for one of your projects.

To use the script, you will need to place an image on your page. You can save the ball.gif image from the demo page if you do not have a suitable image. Any image will work; it does not have to be a ball. When you add the image, make note of the geometry name as it will be needed to configure the script.

Place the following code in a custom header:

<script type="text/javascript">
var iter = 0;
var setId = 0;
var down = true;
var up = false;
var winH = 0;
var bouncingBall = null;
var stillBall = null;

function bounceInit(ball) {
  stillBall = document.getElementById("G"+ball).style;
  bBall = document.createElement("img");
  bBall.src = document.getElementById("G"+ball).src;
  bouncingBall = bBall.style;
  bouncingBall.position = 'relative';
  bouncingBall.visibility = 'hidden';
  bouncingBall.width = stillBall.width;
  bouncingBall.height = stillBall.height;
  window.document.body.appendChild(bBall);
  bouncingBall = bBall.style;
  winH = document.body.clientHeight - 30;
  document.onmouseup = buttonUp;
}

function buttonUp(e) {
  if (setId != 0) clearInterval(setId);
  bouncingBall.visibility = "visible";
  stillBall.visibility = "hidden";
  if (e) {
    bouncingBall.left = e.pageX - 15;
    bouncingBall.top = e.pageY - 15;
  }
  else {
    bouncingBall.left = event.offsetX - 15;
    bouncingBall.top = event.offsetY - 15;
  }
  iter = 0;
  setId = setInterval("generateGravity()", 20);
}

function generateGravity() {
  if ((parseInt(bouncingBall.top)+iter < winH) && down) {
    bouncingBall.top = parseInt(bouncingBall.top) + iter;
    iter++;
    return;
  }
  else {
    if ((parseInt(bouncingBall.top)< winH) && down) {
      bouncingBall.top = winH + 5;
      return;
    }
    down = false;
    up = true;
    if (iter < 0 && parseInt(bouncingBall.top) > winH) {
      clearInterval(setId);
      bouncingBall.visibility = "hidden";
      stillBall.visibility="visible";
      setId = 0;
    }
    if (parseInt(bouncingBall.top) > 0 && up && iter >= 0) {
      bouncingBall.top = parseInt(bouncingBall.top) - iter;
      iter--;
      if (iter%3 == 0) iter--;
      return;
    }
    down = true;
    up = false;
  }
}
</script>
<body onLoad="bounceInit('geo-name');" >

The last line on the above code (<body onLoad=”bounceInit(‘geo-name’);” >) starts the script when the page is loaded in the browser. You will need to replace the parameter geo-name in this line to the actual geometry name of your image. This name is used by the script to locate your image and make a copy that will be used as the bouncing image.

The last line of the bounceInit() function (document.onmouseup = buttonUp;) hooks the mouse ommouseup event to the browser document (or page) so that it will execute the buttonUp() function when the browser detects a mouse button release (left or right)anywhere on the page. This can be changed to another event type, such as an onmouse down (document.onmousedown) or onclick (document.onclick) event.

Leave a Reply