Nancy Winnick Cluts
Microsoft Corporation
April 7, 1997
Dynamic HTML is a group of technologies designed to create and display more interactive Web pages. It includes dynamic styles, dynamic content, two-dimensional (2-D) layout, data binding, and multimedia effects. The Dynamic HTML object model makes all of these features programmable. With Dynamic HTML, you can create Web pages that have all the power of a Microsoft® Windows®-based application.
When you add all of this together, you get better performance for the client and the server, fewer round trips to the server (because attributes for elements can be updated on the fly on the client side), Web pages that are easier to author, and a truly interactive experience for the user.
This article explains the basics of the Dynamic HTML object model and how it works.
The first time I was asked to write about Dynamic HTML, I was told about "the Internet Explorer 4.0 object model." I had no idea what that meant, but it sure sounded complex and scary to me. So I did what any self-respecting developer/writer would do: I decided that there were other, more pressing things to write about. Unfortunately, my hesitance did not make the whole thing go away. Turns out it wasn’t that difficult at all. Hopefully, I will explain it to you in such a fashion that you won’t feel any pain either.
In this article, I will tell you about some of the different features that you will be able to use in Internet Explorer 4.0. I also think that it will be cool to show you the code and explain it.
The Dynamic HTML object model doesn’t define a whole new set of tags or attributes; it makes the tags, attributes, and CSS attributes that you know and love totally programmable. Existing JavaScript™ object models provide access to a small set of elements on the page. Further, only a small subset of their attributes can be modified, and only a small subset of events can be fired from them. Dynamic HTML provides access to all HTML elements and full access to every attribute. Additionally, the set of events that can be accessed for each object is much more complete than that of JavaScript object models.
The Dynamic HTML object model makes it easier to write code due to event bubbling. Event bubbling is a process by which objects can either handle events or allow events to “bubble up” to the parent object. This capability enables you to write less code to handle events. You can let the parent object handle generic events so that each object doesn’t have to, or you can provide default actions.
It is important to note that the Dynamic HTML object model is entirely language- and paradigm-neutral, which means that a Web page can be controlled via scripting, controls, or Java™ applets. The Dynamic HTML object model has been designed so that you can add Dynamic HTML functionality to pages, and they will still display well in older browsers that don't support that functionality. The object model described in this document is currently being proposed to the World Wide Web Consortium (W3C).
Dynamic HTML provides what is known as an element model. This means that every element on the page is accessible and all of its properties, methods, and events are exposed. You can handle events, such as button clicks or mouse-overs, for each HTML tag on a page. Once you trap these events, you can provide certain reactions to each event via scripting (Visual Basic® Scripting Edition [VBScript], JavaScript, and so on). For example, you can handle the mouse-over event for a tag by changing its font to a larger font when the user hovers the mouse pointer over the object, and dynamically changing the text of the object when the user clicks it. Using the Dynamic HTML object model, you can do things that you couldn’t easily do before. In the example below, I have created a global style sheet with multiple classes. On a mouse-over event, the class name is changed dynamically.
<STYLE>
.redText {color:Red}
.blueText {color:Blue}
</STYLE>
<H1 onmouseover="this.className='redText'"
onmouseout="this.className='blueText'">
Make this text red
</H1>
The advantage of this approach is twofold: you get simpler coding and you get code reuse. How can anyone argue with that?
Currently, you can handle a button-click event using Internet Explorer 3.0, but if you want to define a default behavior based on a button click, you have to copy and paste that code to script each object. Dynamic HTML provides a container hierarchy for its HTML documents. Using Internet Explorer 4.0, you write the code once and direct the parent object, via scripting, to handle the event. This is known as event “bubbling.” In more HTML-like terms, this means that you can have a scenario as follows:
window.event.cancelbubble = true.
Event bubbling allows you write more compact code (because you are writing the code only once) for common events. For an example of this, check out the code I have included in the following section from Mr. Alien Head.
Another area of improved functionality is the ability to provide content in two dimensions such that an object can be “on top” of another object. You can also move the object around while the user is viewing the page. This means that you can create a page where one object, such as a jet, can fly past another object—either on top of the object or behind it. One of the samples in the Microsoft Dynamic HTML Gallery at http://www.microsoft.com/GALLERY/FILES/HTML/, Mr. Alien Head, shows just this type of functionality. (To see this functionality in action, you need to be running Internet Explorer 4.0. At the time of this writing (April 1997), Internet Explorer 4.0 was in Platform Preview test release. Please see the Internet Explorer Web site at http://www.microsoft.com/ie/ for more information about the status and availability of Internet Explorer 4.0.) This functionality is actually a superset of Netscape's <LAYER> tag. The following code from Mr. Alien Head demonstrates how to let items move around on a page.
<TITLE>Alien Head</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var curElement;
function doMouseMove() {
var newleft=0, newTop = 0
if ((event.button==1) && (curElement!=null)) {
// position alien
newleft=event.clientX-document.all.OuterDiv.offsetLeft-(curElement.offsetWidth/2)
if (newleft<0) newleft=0
curElement.style.pixelLeft= newleft
newtop=event.clientY -document.all.OuterDiv.offsetTop-(curElement.offsetHeight/2)
if (newtop<0) newtop=0
curElement.style.pixelTop= newtop
event.returnValue = false
event.cancelBubble = true
}
}
function doDragStart() {
// Don't do default drag operation.
if ("IMG"==event.srcElement.tagName)
event.returnValue=false;
}
function doMouseDown() {
if ((event.button==1) && (event.srcElement.tagName=="IMG"))
curElement = event.srcElement
}
document.ondragstart = doDragStart;
document.onmousedown = doMouseDown;
document.onmousemove = doMouseMove;
document.onmouseup = new Function("curElement=null")
</SCRIPT>
<SCRIPT FOR="alienhead" EVENT="onmousedown" LANGUAGE="JavaScript">
// Do not move the alienhead or allow it to be dragged
event.cancelBubble=true
</SCRIPT>
</HEAD>
I've covered the basics of the Dynamic HTML object model. This article did not go into all of the features of Dynamic HTML—you can get that by reading Dynamic HTML: The Next Generation of User Interface Design Using HTML, a white paper that gives you the full scoop on Dynamic HTML and what it means to you as an Internet developer or content provider.