dhtml positioning and layout. what is dhtml? html and xhtml css javascript or vbscript
TRANSCRIPT
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
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)
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)
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
Layering Objects (1.09) z-index:value
3210 = default Web page-1-2-3
If 2 objects have same z-index . . . The one defined later in HTML script is on top.
Object Visibility (1.10) visibility:
visible inherit (from parent) hidden (takes up space in document flow)
display:none
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
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!
Element Collection Can use JavaScript to refer to collections of
objects/elements (1.17)document.collection[i].propertydocument.collection.id
document.links[0]document.collection["id"]
document.links["Home"]document.links.Home
Some Cross-Browser "Gotchas" <DIV> containers
Netscape document.layers.id
IE document.all.id document.id
Another "Gotcha" Referencing Nested Objects
Netscape document.id1.document.id2.document.id3 document.Greetings.document.Title
IE id3 Title
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.
Browser versus ObjectDetect Script Let's look on 1.22 Object can work in most cases
Cross-Browser Branching Design three pages
IE Netscape Other
Pages 1.23-24
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)
Netscape <layer> Greater flexibility with object position and
movement IE doesn’t have this Table on 1.32 shows these methods
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.
Movement We'll discuss movement (Session 1.3) and
move into dynamic content (Tutorial 2) next week