dhtml positioning and layout. what is dhtml? html and xhtml css javascript or vbscript
TRANSCRIPT
![Page 1: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/1.jpg)
DHTML
Positioning and Layout
![Page 2: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/2.jpg)
What is DHTML? HTML and xHTML CSS JavaScript or VBScript
![Page 3: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/3.jpg)
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
![Page 4: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/4.jpg)
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)
![Page 5: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/5.jpg)
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)
![Page 6: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/6.jpg)
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
![Page 7: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/7.jpg)
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.
![Page 8: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/8.jpg)
Object Visibility (1.10) visibility:
visible inherit (from parent) hidden (takes up space in document flow)
display:none
![Page 9: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/9.jpg)
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
![Page 10: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/10.jpg)
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!
![Page 11: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/11.jpg)
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
![Page 12: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/12.jpg)
Some Cross-Browser "Gotchas" <DIV> containers
Netscape document.layers.id
IE document.all.id document.id
![Page 13: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/13.jpg)
Another "Gotcha" Referencing Nested Objects
Netscape document.id1.document.id2.document.id3 document.Greetings.document.Title
IE id3 Title
![Page 14: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/14.jpg)
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.
![Page 15: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/15.jpg)
Browser versus ObjectDetect Script Let's look on 1.22 Object can work in most cases
![Page 16: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/16.jpg)
Cross-Browser Branching Design three pages
IE Netscape Other
Pages 1.23-24
![Page 17: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/17.jpg)
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)
![Page 18: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/18.jpg)
Netscape <layer> Greater flexibility with object position and
movement IE doesn’t have this Table on 1.32 shows these methods
![Page 19: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/19.jpg)
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.
![Page 20: DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript](https://reader036.vdocuments.net/reader036/viewer/2022082403/56649e7d5503460f94b7fcd0/html5/thumbnails/20.jpg)
Movement We'll discuss movement (Session 1.3) and
move into dynamic content (Tutorial 2) next week