1 / 20

DHTML

DHTML. Positioning and Layout. What is DHTML?. HTML and xHTML CSS JavaScript or VBScript. 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. Positioning Objects. CSS-P

aiden
Download Presentation

DHTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 -1 -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/sl011701.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" • <DIV> 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 ObjectDetect 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 <layer> • Greater flexibility with object position and movement • IE doesn’t have this • Table on 1.32 shows these methods

  19. Link to the API <script language="JavaScript" src="Avalon.js"></script> Make sure to place the API reference after all other script and style tags in the <head></head> because of Netscape.

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

More Related