Beginners Guide to DHTML

As a self-proclaimed webmaster, I try my best to keep up with the latest in web technology. My current endeavor is DHTML, or Dynamic HTML. After hearing a lot about this technology and how it will eventually revolutionize the internet, I thought I had to get off the couch and start learning about it, before I lose the right to call myself a “webmaster”. If you’re just as clueless as I am when it comes to DHTML, this tutorial is for you. Enjoy, and please feel free to email me if you have questions.

That’s a great question, one that I admit I had a lot of trouble finding a straight answer to. I remember seeing a posting on a JavaScript newsgroup that attempted to answer this question with the reply:

“DHTML is the combination of HTML and JavaScript”

I said to myself “Isn’t that just a webpage with JavaScript on it then?” I was confused, to say the least. After shuffling through hundreds of search results on search engines for that elusive answer to my question, I still could not find it. So I thought, what the heck, I’ll learn DHTML first, then figure out what it is! Now that I’m somewhat a DHTML programmer, I think I’m ready to present you with a decent one-line definition to the word DHTML:

“DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more dynamic”

You see, DHTML is NOT a scripting language (like JavaScript), but merely a browser feature- or enhancement- that gives your browser the ability to be dynamic. What you really want to learn is not DHTML itself, but rather, the syntax needed to use DHTML. Before anything else, you may want to quickly visit Dynamic Drive to see what this language is capable of.

Like I said, DHTML is a collection of features that together, enable your web page to be dynamic. I think its important now to define just what the creators of DHTML meant when they say “dynamic”. “Dynamic” is defined as the ability of the browser to alter a web page’s look and style after the document has loaded. I remember when I was learning JavaScript, I was taught that you could use the document.write() method of JavaScript to create webpages on the fly. For example:

<script> document.write(“This is text created on the fly!”) </script>

“Not bad”, I remember saying to myself. But what if I wanted to create content not only on the fly, but on demand? Naive I was then, I tried doing just that, by nesting the above code in a function, and calling it via a form button:

<input type=”button” onClick=”writeconent()” value=”text”>

Pressing the button was nothing short of a big disappointment. My entire web page was erased, and I was left with only the text the function produced.

That was back then. Now, with the introduction of DHTML, I can alter content on a web page on demand, whenever I bloody feel like it, without having the browser erase everything else. That’s what DHTML is all about. The ability of the browser to change look and style even after the document has loaded.

Now that I’ve got you all excited, I think it’s only fair that I put a damper on it. The technology of DHTML is currently at its development stage, with NS 4 and IE 4 differing quite greatly in their implementation of this great technology. Its currently not possible to write one DHTML code and expect it to function in both browsers properly. Furthermore, the two browsers are at different stages in their development of DHTML; from my own knowledge and what I’ve heard, DHTML in IE 4 is far more powerful and versatile than NS 4’s. I don’t want to help spread any propaganda, so I’ll leave it at that.

This could either be a good thing, or a bad one, depending on your view. DHTML in NS 4 is quite simple, and comes down to essentially one word- Layer. I was pretty astonished myself, but its true- NS 4 relies completely on a new tag, called the <layer> tag, to spin up its DHTML magic. This new tag is dynamic in that it can be positioned anywhere on a web page (without relation to other content), moved around, its content inside updated on demand, and more.

Basic syntax

The basic syntax of the <layer> tag can’t be simpler (as if any tag in HTML is complicated!):

<layer>Text inside layer</layer>

The <layer> tag is a content tag, which means you can add into it content (like <table>). Go ahead, try inserting the above code onto your page…you’ll notice that the text inside the layer floats above other text, and overlaps them. Imagine a layer as a sheet of paper that resides on top of the rest of the page, and does not take up space within the flow of the document.

Layer attributes

A layer by itself can’t be more boring, not to mention useless. Fortunately, there’s more to it. Layers support attributes that allow you to position it using the x,y coordinates-system, give it a background, clip it (make only certain area of the layer visible), hide it from view, and so on. I’ve listed the most important layer attributes below:

Layer attributes id The name of the layer, used to identify it in your script left The position of the layer in relationship to the x coordinates top The position of the layer in relationship to the y coordinates width The width of the layer, in px or % height The height of the layer, in px or % bgColor The background color of the layer background The background image of the layer src The external html document contained inside the layer

Mix and match different attributes any way you like.

Click here for a sample layer that uses some of the above attributes

Notice I didn’t specify the left and top attributes. When you don’t, the layer is positioned where you defined it.

Scripting layers

Here’s one of the most important thing to learn about layers- how to script them. After all, its the scripts that make layers come alive. To access a layer, you need to use the following syntax:

document.layername

Accessing the layer is just the first step. Once you’ve accessed a layer, you can then go on and manipulate one of the layer’s attributes to produce dynamic effects.

Click here for an example where a layer’s background color interchanges between red and blue.

All of the layers’ attributes are read/write, so be sure to experiment with each of them!

As I began taking on and learning IE 4’s implementation of DHTML, and realized that there’s a lot more to it than its NS counterpart. DHTML in IE does not rely on any one tag, but rather, new objects and properties that stem out of the usual HTML tags you’re used to working with, such as <div> and <table>. It’s a lot more powerful, but at the same time, and lot more complicated to grasp.

The style object of IE 4

HTML elements in IE 4 now all support a style object, which is essentially the “dynamic” object used to manipulate the look and “feel” of that element. Like the <layer> tag, elements can also be assigned an “id” attribute, which can then be used to identify it during scripting. For example:

<div id=”adiv”></div>

In your script, the syntax required to access the style object of “adiv” would look like this:

adiv.style

The style object contains many properties, and by manipulating these properties, you can alter the look of an element, dynamically. I’ll show some of these properties now:

Important properties of the style object

1. backgroundColor The backgound color of the element
   
2. backgroundImage The background image of the element
   
3. color The color of the element
   
4. position The position type of the element. Accepted values are “absolute” and relative”
   
5. pixelWidth The width of the element
   
6. pixelHeight The height of the element
   
7. pixelLeft The position of the element in relation to the x coordinates
   
8. pixelTop The position of the element in relation to the y coordinates
   

The properties above only represent a subset of the total supported properties, but are the most commonly used ones. The basic syntax to manipulating any style property is the same, which I’ll show in a minute. By accessing these properties, we can change the look and style of most HTML elements (as opposed to just the <layer> tag in Netscape)!

Click here for a simple demonstration

Notice how I changed the text’s color:

sometext.style.color=’red’

I first used the element’s id to gain access to it, then, through the style object and finally the style’s color property, I was able to easily change the color of the text on demand!

All style properties are read/write, and are accessed in a similar manner: element id->style object->property name.

Click here for another example that expands an image when the mouse is over it, and reverts it back to its original size when the mouse moves out.

Yes, I know its not exactly the most practical example in the world, but it does illustrate DHTML at work quite well. The image changes dimensions on demand, without the need to reload the document. That’s something JavaScript alone can never do.

If you’re not yet scared off by all the differences in syntax and functionality between DHTML in NS 4 and IE 4, you’re ready to learn how to make content on your page dynamic, or change on demand!

Dynamic content in NS 4

Changing content in NS 4 involves -you guessed it- the layer tag. All layers are treated by the NS browser as a separate entity from the rest of the page, with their own document object (which in turn contains other objects supported by document). This is very important to understand, since the fact that layers contains another document object is what makes it possible to create dynamic content in NS. I’ll first construct a basic layer, then show how to change the contents inside of it:

<layer id=”alayer” width=100% height=30></layer>

Ready to access the document object of the above layer? Here’s the required syntax:

document.alayer.document

So, knowing this piece of information, I can write a script that changes the contents of the layer every 3 seconds.

Click here for an example of how it’s done in Netscape.

The text is being dynamically generated and erased, without the need to reload the document!

Dynamic content in IE 4

In IE 4, dynamic content is realized through a special property called innerHTML that exists on the <span> and <div> tag. Just set this property to a new HTML value, and the contents inside that span or div is instantly updated to the new value! I’ll illustrate how it’s done by modifying the above example to create dynamic content for IE 4 users:

Click here for an example that works for IE.

Same results, just a different way to get there!

If you like working with animations, you’ll be glad to know that with DHTML, the entire web page is now your drawing board! You can create content that fly all over the screen freely. In Netscape, this is done by manipulating the left and top attributes of the <layer> tag. In IE 4, the same thing is accomplished by altering the pixelLeft and pixelTop properties of the style object.

Moving elements in NS 4

Recall in lesson 2 that layers support the left and top property, which controls its offset from the document’s upper left corner. Well, by using simple math and a couple of lines of script, we can dynamically update these properties so the layer moves! The following example changes the left property of a layer so it moves horizontally when a button is pressed.

Click here for the example.

See, all I did was continuously add to the left property of “space” to move it, and set the property back to its original value when I want the layer returned back to its initial location.

Moving elements in IE 4

By the way, the day when NS and IE agree upon one implementation of DHTML is the day I can stop writing two versions of everything (just letting out a little frustration). Moving an element in IE 4 involves basically first wrapping that element either inside a positioned span or div, then changing the span or div’s pixelLeft and pixelTop properties. It sounds complicated, but is actually very simple.

Click here for the example.

What I did first was set the outside <div> called “spaceship” to a position of relative, which is necessary to make the element movable (you could also set it to a value of “absolute”). Then, by manipulating the pixelWidth property of it’s style object, the element moves.

Before “true” cross-browser DHTML becomes available (in other words, when NS and IE comes to their senses), cross-browser DHTML basically means using various scripting techniques you picked during those JavaScript years to sniff out which browser the user is using, and execute the code intended for that browser. In this lesson, I’ll first illustrate a way of creating a “cross-browser” layer, then show you a scripting technique I recently learned that allows you to easily sniff out the browser type of the surfer.

Creating a “cross-browser” layer

Ok, so we’ve got NS that understands the <layer> tag, and IE that understands the <span> and <div>. If we wanted to create a simple DHTML effect such as a moving image, we would usually need to use two tags- A layer tag for NS 4, and either a div or span tag for IE 4. Not exactly pretty, uh? Well, I recently learned that there is actually a way to create a “cross-browser” layer that uses only one tag, although its a little buggy on the NS side. Apparently NS 4 treats an absolutely positioned div the same as a layer. So, without any further delay, here’s an example of a cross browser layer:

<div id=”crosslayer” style=”position:absolute”></div>

NS 4 treates the above div exactly the same as it would with a layer. Like any other layer, to access it , we would first go go through the document object, then the layer’s id:

document.crosslayer

In IE 4, we would simply use the div’s id:

crosslayer

I found that in NS, specifying a layer this way, while convenient in terms of cross-browser compatibility, has one major draw back. Such a layer doesn’t always behave the way a normal layer should, and can sometimes actually crash the browser. Just be prepared to expect the unexpected!

Browser sniffing- object detection

Up until recently, whenever I wished to determine the browser type of my surfers, I would use the navigator object, like most JavaScript programmers would. The below illustrates using this object to sniff out both NS 4 and IE 4:

var ns4= (navigator.appName==”Netscape”&&navigator.appVersion>=4) var ns4= (navigator.appName==”Microsoft Internet Explorer”&&navigator.appVersion>=4)

Personally, I hate using the navigator object- its so complicated to use (just look at the above mess!). Well, I have good news to bring to you. There is actually a lot quicker way to sniff out various browsers, and its called object detection.

The idea is based on the way JavaScript works. If the browser does NOT support a particular object, JavaScript returns null when you reference it. Knowing this fact, we can use an object reference in your if statement (in place of the navigator object) to determine the browser of the user.

Let’s do an example. We know that NS 3+ and IE 4+ support the document.images object. If we wanted to sniff out these browsers, we would do this:

if (document.images) alert(“You are using NS 3+ or IE 4+”)

Translating the above into English, it reads: “If the browser supports the images object (which only NS 3+ and IE 4+ do), alert a message.

Think of object detection as an indirect way of determining the browser type of the user. Instead of directly determining the name and version of the user’s browser (through the navigator object), object detection is a more generic, less hassling browser sniffing technique.

So, how can we use object detection to sniff out NS 4 and IE 4? Well, only NS 4 supports the document.layers object, and only IE 4 supports document.all. We can use this knowledge to easily determine whether the user is using NS 4, IE 4, or both:

if (document.layers) alert(“You are using NS 4+”)

if (document.all) alert(“You are using IE 4+”)

if (document.layers||document.all) alert(“You are using either NS 4 or IE 4+”)

Now you never have to return to the messy navigator object to do your browser sniffings!

DHTML resources

Obviously, this tutorial serves only as an introduction to DHTML. Here are a couple of great resources to continue your DHTML endeavor:

• Dynamic Drive DHTML examples
• MSDN’s guide to DHTML

Frequently Asked Questions (FAQs) about Dynamic HTML (DHTML)