Home      Products & Services      Contact Us      Links

WebHatchers will design & develop your site for you.

Website Menu Heaven: menus, buttons, etc.

Send us your questions.

site search by freefind

SEO, Google, Privacy
   and Anonymity
Browser Insanity
Popups and Tooltips
Free Website Search
HTML Form Creator
Buttons and Menus
Image Uploading
Website Poll
IM and Texting
   or Not MySQL
Personal Status Boards
Content Management
Article Content
   Management Systems
Website Directory
   CMS Systems
Photo Gallery CMS
Forum CMS
Blog CMS
Customer Records
   Management CMS
Address Book CMS
Private Messaging CMS
Chat Room CMS
JavaScript Charts
   and Graphs

Free Personal Status Boards (PSB™)

Free Standard Free PSB

Free PSB Pro Version

Free Social PSB

Free Social PSB Plus (with Email)

Free Business PSB

Free Business PSB Plus (with Email)

PSB demo

Social PSB demo

Business PSB demo

So what's all this PSB stuff about?

Chart comparing business status boards

PSB hosting diagram

PSB Licence Agreement

Copyright © 2002 -
MCS Investments, Inc. sitemap

PSBs, social networking, social evolution, microcommunities, personal status boards
PSBs, social networking, business personal status boards
website design, ecommerce solutions
website menus, buttons, image rotators
Ez-Architect, home design software
the magic carpet and the cement wall, children's adventure book
the squirrel valley railroad, model railroad videos, model train dvds
the deep rock railroad, model railroad videos, model train dvds

Bouncing Ball Animation with the W3C DOM

The bouncerw3cdom.html file simulates the world’s best superball—it bounces forever. Of course you may change that by pressing a key. The ball will bounce lower and lower until coming to a rest. The variables are:

Here's the bouncing ball div and the CSS styles for it from the head section:

<div id="ball" class="b"><img src="ball.gif" width="20" height="20"></div>

<style type="text/css">

.b {position:absolute; left:0px; top:0px; width:20px; height:20px;}


Check out the keypress event capturing code that Netscape requires just to begin the process of keypress monitoring:

var Netscape=(navigator.appName.indexOf("Netscape") != -1);

if(Netscape){document.captureEvents(Event.KEYPRESS);document.onkeypress = testKey;}

Below is the body tag. Note that IE can turn on keypress monitoring from here:

<body onLoad="moveball();" onKeyPress="testKey();">

Here is the only response to a keypress, but since gg is a global variable—declared outside of functions—the moveball() function will feel the effects immediately and slowly stop the ball:

function testKey(){gg=5;}

Below is the moveball() function. First we get the ball object properties into the e variable. Next we add gravity g to the vertical increment value, which will give the ball a tendency to move downward and increase/decrease the value of v greatly as the ball moves. Next we save the old y variable using variables q and r. Now we check to see if the ball seems to have ceased moving vertically—bouncing—by seeing if y equals r. But we also must check to see if y is at the screen bottom (y>394) and gravity has been increased by a keypress (g equals 5). If all these are true we exit the function. If not, add the h and v increment (or decrement) values to the x and y coordinate values respectively.

Whenever the ball hits a screen edge, bounce off it by reversing the sign of the h or v increment/decrement value, say the next three lines. The ball hasn’t the inertia to bounce back up to the ceiling, so no test for y hitting 0 was needed. Note that Netscape has its own idea about where the screen edges are. You may actually need to change these parameters a bit to compensate for the way your screen window is set up.

Next we need to determine where to have the keypress take effect. Make sure that your mouse cursor isn't outside the window or the keypress won't always register, at least in Netscape. Our experiments showed that when the value of the vertical increment v is –26 (and the testKey() function has set the gg flag due to a keypress), the gravity increase should kick in. Values like –10 and –22 stunk. If you're so inclined, investigate why some values are lousy and –26 makes for a stellar performance. Next we update the e object properties with regard to screen coordinates, and then use the setTimeout method to keep the function going. You may experiment with values other than 0 here if the spirit moves you. Or figure out why IE code makes for a slower ball. Or figure out who really whacked JFK.

function moveball(){

var e = document.getElementById('ball');







e.style.top=y + 'px';

e.style.left=x + 'px';