T-XU.COM      
Home |
  Home>Computer Programming>DHTML>
DHTML-Introduction
By Eddie Traversa        [Hits: 8817]



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

1. HTML - For creating text and image links and other pageelements.

2. CSS - Style Sheets for further formatting of text and htmlplus other added features such as positioning and layeringcontent.

3. JavaScript - The programming language that allows you toaccesses and dynamically control the individual properties ofboth HTML and Style Sheets.

The way JavaScript accesses the properties of an HTML documentis through the Document Object Model (DOM). The job of the DOMis to expose all the attributes of HTML and Style sheets toJavaScript control. All you need to know about the DOM is whatJavaScript commands it accepts. Not that easy, as differentbrowsers have their slightly different versions of the DOM, sothey access HTML properties differently as well as display themdifferently.

So how do you locate an HTML element on a page and change itsproperty? This is the job of JavaScript. Obviously, I cant intoall the details of JavaScript or the DOM, but here is an exampleof how JavaScript can change a visibility of a style sheet layerin both browsers.

Note: That every piece of HTML has a location much like adirectory in a phone book. When finding that piece of HTML youhave to go through the same hierarchy process of searching for aname 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 addressand phone number, so the JavaScript reference would be writtenthis way.

washington.seattle.j.jessica.address

or

washington.seattle.j.jessica.phone

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



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" youwould 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 valueto 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 isessentially how DHTML works, but understand there are hundredsand hundreds of attribute properties for text, images, documentsand windows. Not all these properties are supported in bothbrowser and sometime accessing a property requires a few morehurdles, but if you stick to the common denominator propertiesboth browser use then life it a bit easier. I recommend theexcellent DHTML reference book Dynamic HTML - The DefinitiveGuide by Danny Goodman (O'Riley Books) It lists all of the DHMTLproperties and their cross browser compatibilities.
  Top Articles
*DHTML or Flash?
*HTML Encryption Blowfish Encry
*Where is the Best PR Value?
  Related Articles
*Where is the Best PR Value?
*DHTML or Flash?
*HTML Encryption Blowfish Encry


Prev: Selecting a Web Content Management Product   Next: Stress - A Modern Cause of Disease



Home | Site Map | Bookmark this site | T-XU RSS
Copyright 2007 T-XU.com - All Rights Reserved Worldwide.