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.
|
