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

Animation with the W3C DOM

We've used path animation in animationw3cdom.html and to do that we created an array of 21 number pairs representing screen coordinates. The normal W3C DOM getElementById method was utilized on a colored div box that was the sole animation object where e represents the properties of the div object that are addressable:

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

Here's the div object getting its new coordinates from the path array; here's the array element number zeroer once the end of the array is reached; here's the stop flag returning out of the function if it’s set; and here's and the ¼-second interval timer between moves:

e.style.left = pathl[j] + 'px';

e.style.top = patht[j] + 'px';

if (j<20){ j++}else{j=0};



And here's one of the three size/color changers in the movediv() function:

if(j==14){e.style.color = 'darkblue'; e.style.backgroundColor = 'lightblue'; e.style.width = '200px'; e.style.height='200px'; e.style.fontSize = '64px';}

Here's the event capturing needed to get the keypress code to work in Netscape (there's no good excuse for this; it just simply requires event capturing in Netscape!). Note that the last line starts up the event for IE, which needs no capturing, while the first two lines are only for Netscape:

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


document.onkeypress = getakey;

The getakey() function allows the visitor to hide the box or show it again, accompanied by our smart-assed commentary. The self.focus() method is needed for Netscape to get the idea that the focus should be here—it’s located in the body tag. "p" is the id of the HTML paragraph to change DOM style. The innerHTML property is very powerful in that it can allow one to dynamically rewrite most HTML code.

function getakey(){

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

if (f==0) {e.style.visibility = 'hidden';f=1;var obj=document.getElementById("p");obj.innerHTML="NOW AIN'T YOU GLAD YOU DID THAT???!!!<br>(Hit a key after the box disappears to make it reappear.)";}

else{e.style.visibility = 'visible';f=0;var obj=document.getElementById("p");obj.innerHTML="NOW WHAT DID YOU WANNA GO AND DO THAT FOR???!!!<br>(Hit a key after the box disappears to make it reappear.)";}}

The form handling function is called valuecheck(). It has a clearTimeout in it to prevent the setTimeout in the animation function from getting confused and malfunctioning with respect to move intervals. The switch conditional looks at the three possible form values (1, 2 or 3) and executes the correct commands depending on which case matches the value of value. Switch beats if for situations in which specific values of a variable expression need to result in executing certain specific statements. We were surprised the browsers didn’t mind us using that word as a variable. Apparently, as long as we lay off valueOf, we’re okay.

function valuecheck(value){


The form is standard stuff, but it has an id and the valuecheck() function in the select tag. A change in drop-down value activates the event handler onChange that runs the function. The unused id was in case we wanted to make the form addressable by DOM methods, which it is.

<div style="position:absolute; top:69px; right:10px;">

<form style="color:red;">Choose one, quick!<select name="stop me!" id="f" size="1" onChange="valuecheck(value);">

<option value="1">Make it start again (huh?).</option>

<option value="2">Make it stop, PLEASE!</option>

<option value="3">Make it invisible, NOW!</option></select></form></div>

<div id="box" class="b"><br><b>Hi!</b></div>

This web page experiment uses a form drop-down list box to allow the visitor to make the animation stop, start, or disappear. The key presses can also cause disappearances and reappearances, courtesy of the visibility property values, hidden and visible.