1. Chapter 8 © 2001 by Addison Wesley Longman, Inc. 1 Chapter 8 Sebesta: Programming the World Wide Web

2. Chapter 8 © 2001 by Addison Wesley Longman, Inc. 2 8.1 Browser Support for Dynamic Documents - IE5 supports most of CSS and dynamic HTML standards - IE5 also supports some non-standard things, such as advanced visual effects - NN4 supports Netscape JSS and layers, but few of the standard things (except CSS-P) - NN6 support for standards is similar to that of IE5 - A dynamic HTML document is one whose tag attributes, tag contents, or element style properties can be changed after the document has been and is still being displayed by a browser - To make changes in a document, a script must be able to address the elements of the document using the DOM addresses of those elements - NN4 uses a non-standard DOM structure, which makes the few changes it can make more difficult

3. Chapter 8 © 2001 by Addison Wesley Longman, Inc. 3 8.1 Browser Support for Dynamic Documents (continued) - The standard DOM allows base element addresses to be gotten through their names, but the NN4 DOM does not support this - Example: … - The standard DOM address of the button can be gotten with the getElementById method, as in document.getElementById("onButton").style - For NN4, the whole path must be included, as in document.myForm.onButton - To build scripts that work for both NN4 and the standard, you must determine whether NN4 is being used and set the DOM address accordingly

4. Chapter 8 © 2001 by Addison Wesley Longman, Inc. 4 8.1 Browser Support for Dynamic Documents (continued) - The script can determine the browser using the navigator object if ((navigator.appName == "Netscape" && (parseInt(navigator.appVersion) == 4)) dom = document.myForm.onButton; else dom = document.getElementById("onButton").style; - HTML elements are sometimes referenced through a value of a variable or a function parameter, rather than through its id - In these cases, the DOM address must be built for NN4 with eval and string catenation, as in function changer(elemId) { if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) == 4)) dom = eval('document.' + elemId); else dom = document.getElementById(elemId).style;... }

5. Chapter 8 © 2001 by Addison Wesley Longman, Inc. 5 8.2 Element Positioning - This is CSS-P, not DHTML - Without CSS-P, the only ability to position elements in the display of a document is with tables - CSS-P is completely supported by IE5 and NN6, and partially by NN4 - The position of any element can be dictated by the three style properties: position, left, and top - The three possible values of position are absolute, relative, and static - Absolute Positioning <p style = "position: absolute; left: 50px; top: 100 px;"> --> SHOW absPos.html and Figure 8.1 - If an element is nested inside another element and is absolutely positioned, the top and left properties are relative to the enclosing element

6. Chapter 8 © 2001 by Addison Wesley Longman, Inc. 6 8.2 Element Positioning (continued) --> SHOW absPos2.html and Figure 8.2 - Relative Positioning - If no top and left properties are specified, the element is placed exactly where it would have been placed if no position property were given - But it can be moved later - If top and left properties are given, they are offsets from where it would have placed without the position property being specified - If negative values are given for top and left, the displacement is upward and to the left --> SHOW relPos.html Figure 8.3 - Static Positioning - The default value if position is not specified - Neither top nor left can be initially set, nor can they be changed later

7. Chapter 8 © 2001 by Addison Wesley Longman, Inc. 7 8.3 Moving Elements - If position is set to either absolute or relative, the element can be moved after it is displayed - Just change the top and left property values with a script --> SHOW mover.html & Figures 8.4 and 8.5 8.4 Element Visibility - The visibility property of an element controls whether it is displayed - The standard values are visible and hidden - The NN4 values, show and hide, are used internally, though NN4 recognizes the std. values - Suppose we want to toggle between hidden and visible, and the element’s DOM address is dom if (dom.visibility == "visible" || dom.visibility == "show") dom.visibility = "hidden"; else dom.visibility = "visible"; --> SHOW showHide.html

8. Chapter 8 © 2001 by Addison Wesley Longman, Inc. 8 8.5 Dynamic Colors and Fonts - Supported by IE5 and NN6 - Background color is controlled by the backgroundColor property - Foreground color is controlled by the color property - Can use a function to change these two properties - Let the user input colors through text buttons - Have the text button elements call the function with the element address and the new color Background color: <input type = "text" size = "10" name = "background" onchange = "setColor('background', this.value)"> - The actual parameter this.value works because at the time of the call, this is a reference to the text button

9. Chapter 8 © 2001 by Addison Wesley Longman, Inc. 9 8.5 Dynamic Colors and Fonts (continued) function setColor(where, newColor) { if (where == "background") document.body.style.backgroundColor = newColor; else document.body.style.color = newColor; } --> SHOW dynColors.html - Changing fonts - Can change the font properties of a link by using the mouseover and mouseout events to trigger a script that makes the changes - In this case, we can put the script in the HTML onmouseover = "this.style.color = 'blue'; this.style.font = 'italic 16pt Times';" onmouseout = "this.style.color = 'black'; this.style.font = 'normal 16pt Times';” --> SHOW dynLink.html and Figures 8.6 & 8.7

10. Chapter 8 © 2001 by Addison Wesley Longman, Inc. 10 8.6 Dynamic Content - The content of an HTML element is addressed with the value property of its associated JavaScript object --> SHOW dynValue.html and Figure 8.8 8.7 Stacking Elements - The top and left properties determine the position of an element on the display screen, which is a two-dimensional device - We can create the appearance of a third dimension by having overlapping elements, one of which covers the others (like windows) - This is done with the z-index property, which determines which element is in front and which are covered by the front element - The JavaScript variable associated with the z-index property is zIndex - Element stacking is supported by IE5, NN6, & NN4

11. Chapter 8 © 2001 by Addison Wesley Longman, Inc. 11 8.7. Stacking Elements (continued) - The stacking order can be changed dynamically - Make the elements anchors, so they respond to mouse clicking - The href attribute can be set to call a JavaScript function by assigning it the call, with 'JAVASCRIPT' attached to the call code - The function must change the zIndex value of the element - A call to the function from an element sets the zIndex value of the new top element to 10 and the zIndex value of the old top element to 0 - It also sets the current top to the new top --> SHOW stacking.html and Figures 8.9, 8.10, & 8.11