On this page I give an introduction to Dynamic HTML. Although there is no official definition or specification of DHTML, it's becoming very important in web development. This page helps you to understand the most common issues.
My definition: Dynamic HTML is the changing of the style declarations of an HTML element by means of JavaScript.
The trick is that the change takes effect immediately in the browser window, so that the user sees a moving image, a change of text colour or whatever you want to do. If you have only a vague idea of what DHTML actually is, I advise you to go to the DHTML example page first and try the example. When you have seen and used it, you will more easily understand the explanation on this page.
First of all I explain the difference between
static and dynamic HTML, followed by a bit of DHTML
history. Then my definition of a
layer, after which I give the definition
DHTML = CSS + JavaScript and discuss the important
style property.
Then for the difficult bits: how to reach a certain
element on your pages. The two main difficulties are
Netscape 4 and the three
DOMs.
Until the Version 4 browsers were released, we only knew static HTML. That means: we put HTML elements (paragraphs, images, etc.) in a specific order in the source code. The browser always showed all elements in this order. Positioning and styling was done by tables, div's and such aids. If we wanted to change the order or the positioning of the elements, we had to rewrite the HTML.
DHTML, however, gives us the chance to re-organize our pages on the fly. In fact, we can take some elements out of the natural flow of the page, put them somewhere else and change its position again if the user clicks a link.
The natural flow of the page is the page as the browser first shows it. It calculates the tables and paragraphs and other things we put in the page, then displays them in the best possible way, one by one, from the beginning to the end of the HTML document.
But in the Version 4 and better browsers, we can take, say, an image, and put it somewhere on the page without regard to this natural flow. We can force the image to be in the extreme upper left corner of the page, while the rest of the content is still distributed by the natural flow.
In addition, we can add a link to the page, saying "Move image to the right". As soon as the user clicks this link, a little JavaScript is executed which moves the image, say, 200 pixels to the right. We can do this at once or make the image slowly creep to its new position. In either case, the other elements on the page stay where they are, only the image moves.
Since HTML elements could move across the page, this technique was called Dynamic HTML by marketing people of both major browser vendors.
DHTML first came to everyone's attention when the Version 4 browsers were released. Back then it was a buzz-word and although only a few people actually knew what DHTML was or what you could do with it, everyone went into a frenzy of activity writing scripts, doing things etc.
The problem was that back then the Version 3 browsers still had a considerable market share and they didn't support any DHTML. Therefore it wasn't yet possible to use DHTML in commercial sites: only a minority of the users would be able to see it.
Besides, people quickly found out that Netscape 4 and Explorer 4 were quite different in their implementation of DHTML. Although, in hindsight, it is clear that Explorer 4 had much the better implementation, Netscape 4 was released slightly earlier and its documentation was far better, so that in the beginning it was the standard browser for DHTML. Only later did we find out that Explorer could do many more things and was easier to program too.
After a few months the hubbub died down and people started declaring DHTML Dead. To me, this revealed a singular lack of vision. The time was not yet ripe, but DHTML itself still showed tons of promise. To use DHTML, you must be certain that about 95% of your users can see and use your DHTML. When Netscape 4 was first released, this was not the case, so commercial sites couldn't (yet) use DHTML. However, now that the Version 3 browsers have disappeared and even the Version 4 browsers are on the way out, the time is more than ripe for giving DHTML a second chance.
Another problem is the lack of an official definition of DHTML. I think many people overestimate this problem. It's a nuisance for beginning scripters who want to know exactly what DHTML is and for browser vendors who have to decide what their browser should support. The more experienced web developers, however, use DHTML without thinking about such matters, they just want to explore and use the possibilities of the current browsers. To me, the last approach is the most likely to lead to interesting results.
At the moment, the greatest problem is not the coding or the official definition but the concept. You can safely move an image across the page in all Version 4+ browsers. But why would you want to do that? Why would you use a DHTML nav bar instead of simple text links? These questions are far more important than the simple-minded call "DHTML Is Dead" or the lack of official specs and the first one to solve them will take the lead in DHTML development.
One legacy term comes from the first days of DHTML: the word layer. Netscape 4 had its own proprietary layer model (see the Intermediate DOM page for more info) and since many people first programmed their DHTML for Netscape 4, layer has also become to mean a separate part of the page that can be moved independently from all other elements on the page, even though we don't use the <LAYER> tag to put them in the HTML document.
My definition: A layer is a part of the HTML document (usually marked up by a <DIV> tag) that has a position: absolute in the style sheet and that can be moved across the page by a DHTML script.
So if I talk about a layer, I mean this general concept and not Netscape's proprietary layer tag or model.
As I said above, DHTML is the changing of the style declarations of an HTML element by means of JavaScript. For instance, if you have a paragraph with a certain text colour, defined by
p {color: #cc0000;}
you can do something like
element.style.color = '#00cc00';
and as soon as this bit of script is executed the text colour changes from red to green.
Unfortunately this simple bit of DHTML is not supported by Netscape 4. In fact, Netscape 4 only supports the moving of elements across the page and making them visible or invisible (and a few other things, but these are the most important). So we give an element a position on the page:
div {position: absolute;
top: 20px;
left: 0px;}
and then change its left:
element.style.left = 200;
and the element magically moves to 200 pixels from the left margin of the page.
So generally you first go to the HTML element you want to influence (this requires the browser specific coding I explain below), then change one of the style declarations:
element.style.styleDeclaration
If you want to change color, styleDeclaration is color, if you want to change the left, it is left. If you want to change a style declaration with a dash in it, for instance z-index, remove the dash and make the first letter after the dash a capital: zIndex. Same for margin-left => marginLeft.
Please note that the style property reflects the inline styles of the element.
This is important if you want to read out the styles of the element. If you try to read out the color
of the paragraph:
p#testP {color: #cc0000;}
<p id="testP">This is the paragraph.</p>
alert([testP].style.color);
you get an empty alert. This is because the P doesn't (yet) have an inline color style. Instead
it uses the style defined by the p#testP CSS. If you want to read out the color nonetheless,
you need the Get styles script.
Of course, if you define your styles inline, it works fine
<p style="color: #cc0000">This is the paragraph.</p> alert([testP].style.color);
The .style property is required in all browsers, except for Netscape 4 where it is forbidden.
So changing the style of a certain HTML element is not very difficult, except that many things simply won't work in Netscape 4. However, you also have to tell the browser which HTML element you want to influence. To do this, you must invoke it by its correct name. Usually you give an element an ID
<DIV ID="tobechanged">[content of div]</DIV>
and write the DHTML script to call on that ID:
[element with ID=tobechanged].style.left = 200;
There are two problems here. One is the proper definition of a layer in Netscape 4, the other is the differences in DOM (Document Object Model) between the various browsers.
If you want to change the style of an element in Netscape 4, that element must have a position declaration in the style sheet. If you don't give it a position, Netscape 4 simply does not recognize the element as a layer and throws up error messages.
For example:
div#tobechanged {position: absolute;
top: 20px;
left: 0px;}
Now the DIV with ID="tobechanged" has a position and Netscape 4 recognizes it as a layer. You can also use position: relative. This means that the element is positioned by the natural flow of the page, but is nonetheless open to DHTML influence. (This is rarely used, BTW).
So always take care to give your layers a position.
Having given the element a position for Netscape 4's sake, we can now invoke the element so that the browser knows what to change. As I said above, ID's are by far the simplest way to identify a unique element. However, the problem is that the various browsers give various names to the same HTML element. Continuing the example above, if we want to change the left of the DIV with ID="tobechanged", you do
document.layers['tobechanged'].left = 200;
in Netscape 4,
document.all['tobechanged'].style.left = 200;
in Explorer and
document.getElementById('tobechanged').style.left = 200;
in Netscape 6 and other modern browsers (and it will also work in Explorer 5+). So you'll have to write a script that first sees what browser it is in and then correctly names the element you want to change. This sounds harder than it is.
On the Intermediate DOMs page I describe the three ways of naming an element. I wrote a DHTML micro-API that solves all DOM problems for you. If you'd rather view a practical application you can study the DHTML example.