1. DHTML Positioning and Layout

2. What is DHTML? HTML and xHTML CSS JavaScript or VBScript

3. What Can You Do? Position Elements Hide/Reveal Elements Create Animations And much more…. http://www.htmlguru.com http://unix.cc.wmich.edu/rea/380/DHTML

4. Positioning Objects CSS-P Now part of CSS2 position:position_type; left:value; top:value Left: from left of parent Top: from top of parent Parent: Item the object is under in the DOM (1.16)

5. Positions Absolute Defined coordinate, regardless of object's position (1.07) Relative Relative to its location in the natural flow of the document – difficult with just one object because browser resolution varies Use relatives when objects are positioned in relation to one another (1.08)

6. More Positions Fixed Places an object in one location in the display window and does not move Static Lets the browser place the object in it's natural flow

7. Layering Objects (1.09) z-index:value 3 2 1 0 = default Web page -2 -3 If 2 objects have same z-index... The one defined later in HTML script is on top.

8. Object Visibility (1.10) visibility: visible inherit (from parent) hidden (takes up space in document flow) display:none

9. Overflow and Clipping (1.11) width: value; height: value absolute or relative units, or a percentage of parent unit overflow_type: visible hidden scroll auto

10. Da DOM Document Object Model (1.16) In theory it makes every object on a Web page available to you Doesn't always work because Netscape and Microsoft use different variations of the DOM for DHTML IE 6.0 and Netscape 6.2 getting extremely close http://www.devx.com/dhtml/articles/sl011701/sl0117 01.asp http://www.devx.com/dhtml/articles/sl011701/sl0117 01.asp Of course, Netscape 6.x DOM is nothing like 4.x…Oi!

11. Element Collection Can use JavaScript to refer to collections of objects/elements (1.17) document.collection[i].property document.collection.id document.links[0] document.collection["id"] document.links["Home"] document.links.Home

12. Some Cross-Browser "Gotchas" containers Netscape document.layers.id IE document.all.id document.id

13. Another "Gotcha" Referencing Nested Objects Netscape document.id1.document.id2.document.id3 document.Greetings.document.Title IE id3 Title

14. Get the "Gotcha" Taking care of cross-browser functionality Browser detection (1.21) var bName=navigator.appName; var bVer=parseInt(navigator.appVersion); var bVer=parseFloat(navigator.appVersion); IE 5.0 returns a variable of 4.0. IE 6.0 works.

15. Browser versus Object Detect Script Let's look on 1.22 Object can work in most cases

16. Cross-Browser Branching Design three pages IE Netscape Other Pages 1.23-24

17. API Application Programming Interface It's a.js file Write your cross-browser scripts once and only update as needed Go through the positioning objects using the API (1.26-1.36)

18. Netscape Greater flexibility with object position and movement IE doesn’t have this Table on 1.32 shows these methods

19. Link to the API Make sure to place the API reference after all other script and style tags in the because of Netscape.

20. Movement We'll discuss movement (Session 1.3) and move into dynamic content (Tutorial 2) next week