DHTML for dummies

Just got off work and figured I would add a post to my blog.

Topic for today: DHTML 101

Most people know HTML so today I'll talk about how to code some basic DHTML (Dynamic HTML). The concept is simple to grasp; Any HTML that changes itself to suit the user is DHTML.

First you must give each object that is going to change in the HTML a name (this makes it easy to find later). To do this simply add:

name="bob" id="bob"

to any HTML element. (change bob to whatever you want as long as you remember it) some browsers will only support either id or name so I add both which doesn't hurt.

Next you usually want an easy way find it, which varies from browser to browser. To make this easier to made a simple function that gets it for any browser.

function getByID(id) { var ret; if (document.getElementById) ret = document.getElementById(id); else if (document.all) ret = document.all[id]; else if (document.layers) ret = document.layers[id]; return ret; }

Now that we have that function you can get the element 'bob' by calling getById('bob');

The most common form of DHTML is a pop up menu when you mouse over a link.
We do this using the <DIV> tag. you can do a lot of things with the div tag but this time we will focus on their ability to be hidden.
simply make a div tag like this:

<DIV id="bob" style="visibility:hidden; position:absolute; left:100px; top:150px;">

As you may have guessed this box will be positioned 100 pixels to the left and 150 pixels down from the top left of the page and you can add extra settings for color, style, etc.

Now the easy part: showing and hiding the div tag. To do this simply call Object.style.visibility="visible" (or "hidden") to show/hide the tag. So all we need to do is make a link that has

onmouseover="javascript:getById('bob').style.visibility='visible';"

inside the <A> tag then add

onmouseout="javascript:getById('bob').style.visibility='hidden';"

to the div tag.

Since I can't show you everything, you can have the fun of figuring out how to add a timer to auto-hide the div if you don't move your mouse into it.