This article is out of date, and only works for browsers like Netscape 4. If you are interested in easy DHTML for newer browsers, you should check out the JavaScript site at About for more help. His Web Page Animation tutorial is a great place to start.
How Do You Use DHTML?
It's all well and good to know about the DOM or CSS, but how do you use DHTML on your Web site? One of the most subtle uses of DHTML is to degrade your pages for non-DHTML browsers. Using the JavaScript in that article, you give a different experience depending on what your readers use to browse.
But is that Dynamic?
Doesn't dynamic mean that it moves and changes? Well, yes, but it's not that it's constantly moving, but rather that it has the ability to interact with the user and move or change based on something the user did.
So, if you want something to move, you need to define the object to move, position it on the screen, and then you need to create a function with JavaScript or VBScript to move it.
- Defining the object
The following CSS will create a style for HTML text that is blue, and is positioned 50 pixels from the top and left sides of the window:<style type="text/css">
<!--
.moveme
{
position: absolute;
top: 50px;
left: 50px;
font-family: arial;
font-size: 36px;
color: #0000cc;
visibility: visible;
}
// -->
</style>
- Positioning the object
Most of the positioning is defined by the style tag, but you still need to place the text on your page:<div id="ex" class="moveme">Moving Text</div>
- Moving the object
This is the fun part. Once you have the text object on your page, you can move it from left to right (or right to left) with a simple JavaScript:function moving(start, finish)
{
if (start [ finish)
{
ex.left = (start += 5);
setTimeout('moving(' + start + ',' + finish + ')', 100);
}
}
- Define the variable
You also need to define the variable (in this case "ex") so the function knows what to move:<script language="JavaScript">
<!--
if (dhtml)
{
var ex = (navigator.appName == "Netscape") ?
document.ex : document.all.ex.style;
}
// -->
</script>
- Run the script
The only thing left is requesting the script to run when you load the page:<body onload="moving(50,250)">
