DHTML Explained | combine the power of JavaScript with CSS for dynamic pages (original) (raw)

Path // www.yourhtmlsource.com → JavaScript → DHTML EXPLAINED

When the version 4 browsers came onto the scene they effected a small revolution in web design. While their support for new standards like CSS was poor, they held within themselves great promise. One of the buzz-words coined at this time was DHTML — Dynamic HTML — which was touted to end the viability of boring, static webpages. Here are the facts on this intriguing technology...

Page Navigation:
What is DHTML? · Obligatory Backstory| Let's get Dynamic · An Example... · Netscape 4 DHTML

This page was last updated on 2012-08-21

What is DHTML?

So what are we talking about here, exactly? What is DHTML? Most web developers don't actually know, or only have a vague idea of what the term means; a consequence of the fact that no official specs or definition have ever been issued. The accepted definition for this new item in your nomenclature is the changing of the style declarations of a HTML element through JavaScript.

When you execute a change to the style declaration of an element, the change is registered immediately in the browser window, without the page having to be refreshed. You can have a reader interacting with a single page, hiding and showing elements, moving things around, changing colours and generally messing everything about — and never have to call for further files or load new pages.

Before the advent of DHTML, we could only use static HTML. When you load up a page, aside from the odd JavaScript rollover, the view didn't change in appearance until you moved on to the next page. Elements were placed onto the page in a natural flow according to the order they assume in the HTML code. DHTML, being dynamic and all, allows you to disrupt this natural flow by taking elements out of the page and displaying them elsewhere, on command from user interactions. Clicking on links and buttons can allow all sorts of things to take place. The order things come in the source code can be made largely irrelevant with absolute positioning.

Obligatory Backstory

So if DHTML is so great, how come it's used so little in mainstream websites and is commonly relegated to web designer's personal experiment sites? Well, DHTML has a shadowy past behind it. Much noise and commotion erupted when it was first announced at the same time as the version 4 browsers were released. At the time people really thought this was the next big thing and would spell the end for the old-style web of unmoving text and images.

DHTML's problems as a technology began because at this point it was not supported by the version 3 browsers, who still retained a considerable share of the market. Clearly, this made it impractical for use on any commercial site. Further to this, as rivals both Netscape and Microsoft had no interest in working on a standard method of DHTML, and so a script which worked in one of the big two browsers would not work in the other.

Netscape's implementation of DHTML paled in comparison to IE4's, but due to a slightly earlier release and more complete documentation, it was adopted as the standard browser for DHTML. Quickly however, the relative difficulty of programming this new breed of script, along with the ridiculously disparate browser support, set a number of people out on a crusade under the banner that DHTML was dead. Many working designers nodded sagely and the issue was laid to rest.

A few right-thinking individuals argued the point however, contending that DHTML had yet to come into its own, as the time was simply not yet right for its true inception. DHTML is not really a gracefully degrading technology, so you need to be sure that the vast majority of your audience will be able to support it. With the disappearance of version 3 and, soon, version 4 browsers from the browser landscape, we will soon be able to predict with certainty that DHTML scripts can be safely used on our pages.

Let's get Dynamic

By now you'll want to know exactly how this whole style switching malarkey is accomplished. It's simple, really: all elements are given a new style property, which hold all possible CSS style declarations inside it. You simply assign these properties a new value. Say a div with id="main" defined has the stylings

div#main {color: #000000; border-left: 1px solid red; }

To change the way this division looks, we first access the element through the Document Object Model. Because different browsers support different models, you'll normally need to branch your code in three ways so your DHTML works in all browsers. In this case I'm using the Level 1 DOM. We then access its style property and finally assign a new value to whichever property we want to modify. Here, this'll change the text's colour:

document.getElementById('main').style.color = '#ff0000';

When this line gets executed (through a function or an event handler), the text in that div will become red throughout the page. Nifty.

To modify the value of a compound property (a property with a dash between words, like border-left), we take out the dash and capitalise the first letter of the next word.

document.getElementById('main').style.borderLeft = '2px dashed red';

To change the position of an element we access its positioning properties, left and top (Netscape 4.7 doesn't support the two other sides). If our div was defined as

div#nav {position: absolute; top: 20px; left: 120px; }

We could change its position with

document.getElementById('nav').style.left = 300;

Here we're giving a numerical value to the property instead of the strings we've been using above. When you use a number, your browser assumes you're using pixels. This is to allow you to perform computations on the value, like adding 10 to the current value. We could also set this value with element.style.left = '300px'.

An Example...

The paragraph below has been given an id, so we can manipulate it with the buttons below it. Play around with it.

Mess me about.

Move it right Make it blue Make it bold Invisibilise Reset

Netscape 4 DHTML

That old dog Netscape 4.7 was a dodgy old browser when it came to DHTML. It didn't support the changing of text's colour or font through DHTML (and a number of other properties) — really only being able to change an element's visibility and position (only left and top, not right and bottom). To be able to change any of the properties an element must be given a position style declaration.

Accessing an element's style declarations was done differently in this browser too, which is why I’m showing it here despite it being hugely outdated. You may come across this style of code on older JavaScript tutorials, so it’s good to be familiar with it. The style property is omitted, so a div with an id of 'main' would have its position changed with a line like

document.layers['main'].left = 200;

You can learn more about Netscape's DOM, and how to write cross-browser scripts in the advanced DOMs page.