Go to JDA Publishing's Home Page
Home |  Articles |  Newsletter |  Services |  Contact |  Links
Build |  Promote |  Profit |  Planning |  Getting Started

Intro to DHTML
Eddie Traversa
 nirvana.media3.net

A few people have requested that I give an explanation as to what DHTML actually is, so here goes:

Think of DHTML as not a singular technology but a combination of three existing technologies glued together by the Document Object Model (DOM):

HTML - For creating text and image links and other page elements.

CSS - Style Sheets for further formatting of text and html plus other added features such as positioning and layering content.

JavaScript - The programming language that allows you to access and dynamically control the individual properties of both HTML and Style Sheets.
The way JavaScript accesses the properties of an HTML document is through the Document Object Model (DOM). The job of the DOM is to expose all the attributes of HTML and Style Sheets to JavaScript control. All you need to know about the DOM is what JavaScript commands it accepts. Not that easy, as different browsers have their slightly different versions of the DOM, so they access HTML properties differently as well as display them differently.

So how do you locate an HTML element on a page and change its property? This is the job of JavaScript. Obviously, I can't go into all of the details of JavaScript or the DOM, but here is an example of how JavaScript can change the visibility of a style sheet layer in both browsers.

Locating your elements

It's important to note that every piece of HTML has a location, much like a directory in a phone book. When finding that piece of HTML you have to go through the same hierarchy process of searching for a name in the phone book such as

(state) Washington -> (City) Seattle -> (Listings) j -> (Name) Jessica

In JavaScript, a reference to this would be equivalent to
washington.seattle.j.jessica

Now Jessica may have additional information such as her address and phone number, so the JavaScript reference would be written this way:
washington.seattle.j.jessica.address
or
washington.seattle.j.jessica.phone

Lets transcribe the above metaphor to a DHTML document that contains a <DIV> layer [myLayer] with style attributes [top,left,width,height,z-index,visibility,etc], and the layer contains a bit of text "myText" (Note that the visibility attribute is set to hidden).

<DIV ID="myLayer" STYLE="position: absolute; left: 0px; top: 0px; width: 100px; height: 100px; z-index: 3; visibility: hidden;">
myText
</DIV>


In Netscape the address to the DIV layer "myLayer" is
document.myLayer

in Explorer it is
document.all.myLayer.style

The W3C way of identifying the address is
document.GetElementById('myLayer').style

To access the properties such as visibility under "myLayer" you would use these addresses.

Netscape
document.myLayer.visibility

Explorer
document.all.myLayer.style.visibility

W3C
document.getElementById('myLayer').style.visibility

To change the visibility of this layer you would assign a value to your JavaScript address.

Netscape
document.myLayer.visibility = "visible";

Explorer
document.all.myLayer.style.visibility = "visible";

W3C
document.getElementById('myLayer').style.visibility="visible";

Now the previously hidden layer is now visible. This is essentially how DHTML works, but understand there are hundreds and hundreds of attribute properties for text, images, documents and windows.

Not all these properties are supported in both browsers and sometime accessing a property requires a few more hurdles, but if you stick to the common denominator properties both browsers use, then life is a bit easier. I recommend the excellent DHTML reference book Dynamic HTML - The Definitive Guide by Danny Goodman . It lists all of the DHMTL properties and their cross browser compatibilities.

Home |  Privacy |  Newsletter |  Services |  Contact |  Links
FREE! Publication Free Publication
Subscribe to the
Web Builder Letters!
a free newsletter offering tips, reviews, and resources to help you produce, grow, and manage a quality website.
First Name:
Email Address:

stop_small.jpg - 5kb
MINI WEBSITE PLAN

Your own
internet presence
for only $30/month

READ MORE !

Windows for Newbies!
FREE internet marketing courses Free Courses
Affiliate Masters
FREE Intensive 5-Day Email Course from the creators of Make Your Site Sell. Learn how to maximize your affiliate profits!
InfoProduct Masters
FREE Intensive 5-Day Email course on creating, producing and selling your very own infoproduct.
Pricing Masters
FREE Intensive 5-Day Email course that shows you how to find the PERFECT PRICE for your product.
NetWriting Masters
FREE Intensive 5-Day Email course on how to write sales-clinching copy on the Net.

Are you're ideas growing money? If not click here.



jss-micro.jpg - 3kb

Proud member of WebChamber.com - Professional Website Design in Oklahoma. Click to verify membership.

Professional Website Design in Oklahoma Registered and Labeled

Privacy Partnership Logo