DHTML-Introduction by Eddie Traversa
Think of DHTML as not a singular technology but a combination of three existing
technologies glued together by the Document Object Model (DOM):
1. HTML - For creating text and image links and other page elements.
2. CSS - Style Sheets for further formatting of text and html plus other added
features such as positioning and layering content.
3. JavaScript - The programming language that allows you to accesses 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 cant into all the details of JavaScript or
the DOM, but here is an example of how JavaScript can change a visibility of a
style sheet layer in both browsers.
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 browser and sometime accessing a property requires a few more hurdles,
but if you stick to the common denominator properties both browser use then
life it a bit easier. I recommend the excellent DHTML reference book Dynamic
HTML - The Definitive Guide by Danny Goodman (O'Riley Books) It lists all of
the DHMTL properties and their cross browser compatibilities.
About the Author
Eddie Traversa DHTML Nirvana http://nirvana.media3.net/
is a site dedicated to exploring the possibilites of DHTML. It hosts free
graphics, dhtml templates and tutorials. Some of the tutorials emphasis is on
Flash/DHTML integration.
|
