1 / 11

Chapter 8

Chapter 8. Sebesta: Programming the World Wide Web. 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

lacey-blackburn
Download Presentation

Chapter 8

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. Chapter 8 Sebesta: Programming the World Wide Web

  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. 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: <body> <form id = "myForm" > <input type = "button" id = "onButton"> … </form> </body> - 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. 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. 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. 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. 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. 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. 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. 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. 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 <a href = "JAVASCRIPT:fun()"> - 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

More Related