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
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
Labels: Articles
0 Comments:
Labels
- Articles (26)
- Ascii SMS (30)
- Birthday SMS (9)
- Eid Mubarak SMS (6)
- Poetry (654)
Blog Archive
-
▼
2008
(725)
-
▼
September
(98)
- !!!Eid ki Dua Sab Dostoon K Lieye!!!
- Troubles as light as Air
- Troubles as light as Air
- Aap hmare dil me rhte hain,
- The day, The happy day, The wishing day
- For this, is a special time when family
- Are You Tired Of Wasting Time And Money Searching ...
- Site Rubix The Launch of the Best Website Builder ...
- DHTML-Introduction by Eddie Traversa
- Xhtml Web Design And Benefits Of Accessible Web De...
- Formatted Data Recovery - What To Do When Everythi...
- How To Find The Owner Of Any Telephone Number by...
- Site Indexing - Great Eight Tips By Prashant K Sh...
- 5 Sure Ways to Explode your Adsense Revenue By Muh...
- Why do i need SEO to improve my site?
- Role of SEO in Increasing Your Traffic By ganesh
- The Super Duper Problem Fixer by Ray geide
- A Guide on RSS Tool by Terry Leslie
- Windows XP Slow Boot - Fix This Problem Now! by ...
- Google Chrome : The new entrant to the browser lan...
- 5 steps to clear windows DNS cache perfectly by ...
- Speed up Internet Explorer by Mike Juicytek
- Speed up Bittorrent Downloads by Mike Juicytek
- How to Speed Up Firefox by Mike Juicytek
- The Benefits Of Using A Microsoft Registry Cleaner...
- Troubleshooting Windows XP Blue Screens of Death b...
- Get Rid Of The Windows 32 Errors With Registry Cle...
- How To Safely Remove Unwanted सॉफ्टवेर by Temp IT Guy
- How to build and host your own website? by Phil ...
- What Is Necessary to Know About Web Design by Jo...
- How to create photo gallery website using Adobe फो...
- Beginner’s Guide To Free For All Sites (FFA's) by ...
- Sending birthday blessings
- Smile is a curve that sets everything
- Flying papers , multi colours of balloon,
- Kick off ur shoes, take a break
- Its a nice feeling when you know that someone like...
- Your birthday is the perfect day to say I care,
- Let the GOD decorate each GOLDEN RAY OF THE SUN re...
- Somebody up there Loves you
- Before the clock strikes twelve
- --,!""""""""""""!/ - ,! Yaadein ! !"-O-'"""'"""O'O...
- . ‘ 12 ‘ .9 !/ 3‘ . 6 . ‘. ‘ 12 ‘ .9 !_ 3‘ . 6 . ‘...
- ( /; )( /SO rahe ho KYA?(@; ((@
- ()') ('()( '';:'' )( )') ('(' )When I Give U a Mes...
- (>=<) IT"S ME( "o" ) DON"T(,) . (,) PRESS¿J¿J(>=<)...
- ()""() ()''''()( ."o o", )i just wanna give a HUG....
- l ()""""() ll ( ' o' ) 'll=( ,)===( ,)=lI'm just s...
- ( ö, ) ( ", )(")(") (")(")The nicest placein the '...
- Knock knock...Any1 there?Oh good,hi i have a deliv...
- She is Basanti@<@>JL@<@>JL
- .-. .-.-. .-.!.."..!.."..!"-..-"'-..-" MYSWEET HON...
- ;****; o( @..@ )o "(---)" Paichan kaun? Bandar bi ...
- One ( ' ""()good ((")' )nite ( / "(,,)Kiss for you...
- LOVEYOU.-..-. /),/) .-..-."-.-" ( ';' ) "-.-".-..-...
- ( .) (. )oo_( .) (. )0o_( .) (. )o0_
- Come here, take off ur pants+get on top of me. Enj...
- (é _; ((é( )-_; (( )-(é -
- () ()( '.' ) BUSSI(")_(")-------------------------...
- ()" .'.()( (T))(ö) (ö)Wo bist Du?().'. "()((T) )(ö...
- o Keep-l- on/ > dancingo Keep-l- on< > dancingo Keep
- o,,,o /),/)( ' ; ' ) ( ' ; ' )(,,)--(,,)(,,)--(,,)...
- OOPS! HOLD IT! SMILE!!! *CLICK!* <)". ."(>
- .-""-. ( 'o' ) __J .-""-. ('o' ) <__/>.-""-.
- ._I__I_, (_£___=------/ ._I__I_, ----\----
- ("v") ("v")'v' 'v'("v")("v")'v' 'v'(",v.")
- ("""""""""""")9mm/""'/&/"""""'/ /I KILL PEOPLE""" ...
- ()""() ()''''()( ."o o", )i just wanna give a HUG....
- /),,/)( ' ; ' )(,,)-(,,) Kiss me/),, /)( ; ' )(,,)...
- , -. .- .'. I .'" . ", -. .- , -. .- .'. I '. Miss...
- ,-,(c ';')_))'//(__=3((---|>' L L ))__ ,.,-,(c ';'...
- Soch lena Gham-O-Ilam Bohat Aate Hain
- Phir Se Rog Lagao Tum Mujhse Rabt Berhao Tum
- Teri Wafa Ko Humne Bhulaya Kab Tha
- Dhoop B Taiz Hai Pass Saya B Nahi
- Nahi Rekhte Hum Wafa Ki Umeed Kisi Se B
- Aik Pal Chain Se Soya B Nahi Jata
- Dard B De Gaye Sitam B De Gaye Zakham K Saath Saat...
- Kia MIla Usey Khoon-E-Tamana Ker K
- Aik Zara Si Ghalti Se Shaak Ki Zard Tehni Pe
- Humse Wafa K bare Mein Jo Chahe Poch Lo Lakin Wafa...
- Ab Teri yaad Se Wehshat Nahi Hoti Mujhko
- Tere Masoom Se Dil Ne Wo Pyaar Dia Hai Terse Hain ...
- Her Su Raqabton Ka Dehekta Alao Tha
- Wo Naam Tha Badal Gaya Mein Sham Tha Dhal Gaya
- Kanton Se Guzer Jana Sholon SE Nikal Jana
- Dil Jo toot Gaya To Feriyad Kero Ge Tum Hum Na rah...
- Mere Andaz-E-Wafaa ko Jab Samjh jao Ge Meri Yadon ...
- Udas Tha Iss Qadar K Soya Nahi Raat Bher
- Jo Udas Hain Tere Hijar Mein Jinhe Bojh Lagti Hai ...
- Shidat-E-Dard K Alem Mein B Chup Rehta Hon
- Kerta Raha Jo Roz Mujhe Uss Se bad-Guman
- Yaadon Mein Teri Yaad Thi Kya Yaad Tha
- Toot Ker Chaha Jise WO Lot Ker Aaya Nahi
- Her Raat Ek Naam Yaad Aata hai
- Youn To Sab Mile Humse Pyar K Saath
- Hum To Samjhe The Zakham Hai Bher Jaye Ga
- Kuch Iss Tarah Se Hum Tere Nazdek Aa Chuke
-
▼
September
(98)