Advanced DHTML
Goals: Understand the importance of uniquely identifying object with the HTML ID attribute Understand how to change CSS properties by passing JavaScript style properties Understand how layers work Understand how to dynamically manipulate layer properties
Quick Review of DHTML DHTML is a programming model that includes elements from: HTML JavaScript DOM CSS DHTML relies heavily on user interaction DHTML depends largely on named objects!
Quick Review of CSS Three Major Style Types: Depends on Rules: External (Multi-page scope) Embedded (Page-level scope) Inline (Container-level scope) Depends on Rules: Selector Declaration Property Value
Quick Review of CSS Typical Rule Architecture (varies for Inline Style) selector { property:value; property2:value2 }
Quick Review of CSS Example of Rule Applied to all <p>…</p> Containers p { color:#666666; background-color:#000080 }
Quick Review of CSS Example of Custom Class Rule: .alert { color:#ffffff; background-color:#0000ff }
Applying a Class Rule (HTML) To apply a class rule, use the “class” attribute of an HTML tag: <h1 class=“alert”> Important Notice About The Midterm </h1> <p class=“alert”> Midterm Exam is Canceled. Everyone receives 100.00%! </p>
Changing Properties via JavaScript We’ve already seen that we can dynamically change properties of objects explicitly created by HTML: Changing the src property of an image object Changing the value property of a textbox object Changing the background color property of the document object We can also change properties for an entire group of tags established by CSS!
Using the HTML ID Attribute To change properties using Dynamic CSS, we must first be able to uniquely identify objects created by HTML … To do this, we use the id attribute Each tag is assigned a unique value for the id attribute. The id attribute’s value essentially establishes a tag container as a recognizable object for JavaScript. Usually used in conjunction with the document.getElementById() method.
Creating the ID Attribute (HTML) <html> <head> <title>ID Sample</title> </head> <body> <p id=“simple”> He’s pining for the fjords! </p> </body> </html>
getElementById() Method document.getElementById() is a method of the document object that establishes the connection between an HTML object (typically, a tag) and JavaScript. The method argument is the value assigned to the id attribute. Be sure to watch case and syntax! The id value and the string sent to the method must match exactly.
getElementById() Example First, we’ll need to create a variable to hold the reference to the HTML object: var objPara1; objPara1 = document.getElementById(“simple”);
getElementById() Example Once we’ve assigned the HTML element to a variable, we can then change its properties (even those established by CSS). To do this, we can use dot notation: objPara1.style.color = “#00FF00”; You must assign property values as STRINGS!
JavaScript – CSS Equivalents font-size fontSize font-weight fontWeight font-family fontFamily font-style fontStyle text-decoration textDecoration color background-color backgroundColor background-image backgroundImage
getElementById() Example Dynamic CSS Toolbar Uses two functions to change the style properties of <td>…</td> containers and <a>…</a> containers Reacts to mouse events attached to <a> … </a>
Using Layers NOT THE SAME THING as Netscape’s <layer> … </layer> Used to create elements which can be moved, can appear or disappear Rectangular shape that is positioned along the X, Y and Z axes
Thinking in Three Dimensions x = Horizontal Axis y = Vertical Axis z = “Depth” Axis (Stacking Order) Specified by the “z-index” property Think of the z axis pointing from the monitor towards you
Creating a Layer Usually creating using the <div> … </div> and an associated style Layer Attributes: position relative absolute left top height width z-index integer value higher values are placed on top
Simple Layer Example No JavaScript in these examples Created layers using the <div> … </div> In the second example, we introduce the Z-index (uses 2 layers). Example 1 Example 2
Advanced Layer Example – Tabbed Folders Introduces the “visibility” attribute visible hidden Uses JavaScript functions to turn “on” or turn “off” layers
Advanced Layer Example – Drop-Down Menu Uses the “visibility” attribute to show/hide menus Menu links are created using standard HTML, contained in a <div> … </div>
Questions?
Resources Heinle, Nick & Bill Peña. Designing With JavaScript: Creating Dynamic Web Pages. Sebastopol, CA: O’Reilly & Associates, 2002.