Why do the colored balls keep on going down past the edge of the page

Question

I have the following JavaScript; the intent is that circles will bounce on the screen, off all edges.

I went to a variable storing the window's height and width, because I thought failure to bounce off the bottom of the screen might because the node was progressively expanding, so my original check against jQuery(window).height() was pointless.

However, after having addressed this way of making a window bouncy on the edges, or tried to (it's at http://cats.stornge.com), I have not seen a ball bounce off one edge of the window, and if you watch your scrollbar, you can see that they are going well beyond the original bottom of the window as they fall.

    var viewport_height = jQuery(window).height()
    var viewport_width = jQuery(window).width();
    var available_images = ['red.png', 'orange.png', 'yellow.png',
      'green.png', 'blue.png', 'purple.png', 'brown.png', 'black.png',
      'grey.png']; //, 'white.png'];
    var bodies = [];
    for(var i = 0; i < 3; ++i)
        {
        body = {id: i, velocity_y : Math.random(),
          velocity_x: Math.random() * 10 - 5,
          position_x: Math.random() * viewport_width - 100,
          position_y: Math.random() * viewport_height - 100};
        document.write('<img id="' + i + '" src="' + available_images[Math.floor(Math.random() * available_images.length)] + '" style="z-index: ' + i + '" />');
        bodies[bodies.length] = body;
        }
    function iterate()
        {
        for(var index = 0; index < bodies.length; ++index)
            {
            bodies[index].velocity_y += .1;
            bodies[index].position_x += bodies[index].velocity_x;
            bodies[index].position_y += bodies[index].velocity_y;
            var position = jQuery('#' + index).position();
            if (position.top + 100 > viewport_height)
                {
                bodies[index].velocity_y = - bodies[index].velocity_y;
                bodies[index].position_y = viewport_height - 100;
                }
            if (position.top < 0)
                {
                bodies[index].velocity_y = - bodies[index].velocity_y;
                bodies[index].position_y = 0;
                }
            if (position.left > viewport_width - 100)
                {
                bodies[index].velocity_x = -bodies[index].velocity_x;
                bodies[index].position_x = viewport_width - 100;
                }
            jQuery('#' + index).css('margin-top',
              bodies[index].position_y + 'px');
            jQuery('#' + index).css('margin-left',
              bodies[index].position_x + 'px');
            }
        }

    setInterval(iterate, 30);

I'd love to see how to make this code set bouncy walls at the boundaries of the original viewport.

Answer 1

When changing the margin-top and margin-left, the width and height of the window started to change as well.

I got this to work by changing the css() calls setting margin-top and margin-left to offset(). I also added another if statement to make sure the balls bounced off the left-hand side as well:

 var viewport_height = jQuery(window).height()
    var viewport_width = jQuery(window).width();
    var available_images = ['red.png', 'orange.png', 'yellow.png',
      'green.png', 'blue.png', 'purple.png', 'brown.png', 'black.png',
      'grey.png']; //, 'white.png'];
    var bodies = [];
    for(var i = 0; i < 3; ++i)
        {
        body = {id: i, velocity_y : Math.random(),
          velocity_x: Math.random() * 10 - 5,
          position_x: Math.random() * viewport_width - 100,
          position_y: Math.random() * viewport_height - 100};
        document.write('<img id="' + i + '" src="http://cats.stornge.com/' + available_images[Math.floor(Math.random() * available_images.length)] + '" style="z-index: ' + i + '" />');
        bodies[bodies.length] = body;
        }
    function iterate()
        {
        for(var index = 0; index < bodies.length; ++index)
            {
            bodies[index].velocity_y += .1;
            bodies[index].position_x += bodies[index].velocity_x;
            bodies[index].position_y += bodies[index].velocity_y;
            var position = jQuery('#' + index).position();
            if (position.top + 100 > viewport_height)
                {
                bodies[index].velocity_y = - bodies[index].velocity_y;
                bodies[index].position_y = viewport_height - 100;
                }
            if (position.top < 0)
                {
                bodies[index].velocity_y = - bodies[index].velocity_y;
                bodies[index].position_y = 0;
                }
            if (position.left > viewport_width - 100)
                {
                bodies[index].velocity_x = -bodies[index].velocity_x;
                bodies[index].position_x = viewport_width - 100;
                }
            if (position.left < 0)
                {
                bodies[index].velocity_x = -bodies[index].velocity_x;
                bodies[index].position_x = 0;
                }
                jQuery('#' + index).offset({top: bodies[index].position_y, left: bodies[index].position_x });
            }
        }

   setInterval(iterate, 30);