DHTML-Introduction

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

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)



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.

More Web Development and other resouces to help you locate great articles just like DHTML-Introduction :

Here are other categories to find more must know information on anything and everything.
Auto and Trucks
Business and Finance
Computers and Internet
Education
Environment
Family
Food and Drink
Gadgets and Gizmos
Gardening
Government
Health
Hobbies
Home Improvement
Kids and Teens
Legal Matters
Marketing
Music and Entertainment
Online Business
Parenting
Pets and Animals
Recreation and Sports
Self Improvemen
Site Promotion
Travel and Leisure
Web Development
Women
Writing
Here are more Web Development articles to give you more must know information just like in DHTML-Introduction article.

Tried and Tested Tips to Improve your Website - Part 1
1. DO NOT use excessive graphics or banner images on a single web page. They tend to slow the loading of your Web page. Impatient surfers might close their browser and move on. If you have many image...
Read more


Want A Sticky Website That Sells? Forget Content!
An interesting debate is raging among copywriters, web designers
and content providers about the key differences, if any, between
writing copy for the web versus writing content.

According to prolific copywriter Nick Usborne, a survey conduct...
Read more


New-fangled CD Label Printer
Have you been exposed with the conventional way of having your CD labeled? Well, that old way of printing labels especially for CD’s were very labor extensive. It requires long working hours, enough man power to do the pasting and cutting plus the high co...
Read more


Criteria of choosing an ideal web hosting company
Before we talk about what it takes to be a cheap and good quality web host, let’s get to the fundamental first.

What is a Web Host?

A web host is a service provider that places your web site on a computer which is connected ...
Read more


Business Web Hosting: Which is Right for You?
Business web hosting is what you need. You have a website you need to put online. When you look around on the internet, there are thousands of choices. How do you choose the right web hosting package for your business?

Reliable web hosting Read more


 

Thank you very much for viewing this must know article: DHTML-Introduction . Hopefully you have found all the information you were looking for in " DHTML-Introduction ". If you feel like you need more information feel free to check out Info Pom HOMEPAGE to look for more articles in our humangous database

Site Partners:
Background Check