1. Working with Dynamic Content and Styles
DHTML Tutorial 2 Creating a Product Information Web Site
New Perspectives on DHTML, 2e
Tutorial 2

2. New Perspectives on DHTML, 2e
Objectives
Create Web pages with contents that change in response to user actions
Learn about Netscape 4’s <layer> tag
Display the contents of an external file in either a layer or an inline frame
New Perspectives on DHTML, 2e
Tutorial 2

3. New Perspectives on DHTML, 2e
Objectives
Work with dynamic styles in the Netscape 4, Internet Explorer, and W3C DOMs
Create an expandable outline in the Netscape 4, Internet Explorer, and W3C DOMs
New Perspectives on DHTML, 2e
Tutorial 2

4. Working with Dynamic Content
Dynamic Content: Web page content that changes in response to user actions
New Perspectives on DHTML, 2e
Tutorial 2

5. Working with Dynamic Content
Different approaches for DOMs
IE and W3C DOM: All page content accessible to scripting language
NS 4 DOM: Use JavaScript to rewrite sections of page and then redisplay those sections
New Perspectives on DHTML, 2e
Tutorial 2

6. Using the <layer> Tag in Netscape 4
To create dynamic content in Netscape 4: <layer id=“id” attributes> document content </layer>
Where id is the name of the layer
Where attributes define the appearance and location of the layer
Where document content is content placed within the layer
New Perspectives on DHTML, 2e
Tutorial 2

7. <layer> Attributes
clip=“top_x, left_y, bottom_x, right_y”
Specifies the coordinates of the viewable region of the layer
height=“value”
Specifies the height of the layer, in pixels
left=“value”
Specifies the horizontal offset of the layer, in pixels
pagex=“value”
Specifies the horizontal position of the layer
pagey=“value”
Specifies the vertical position of the layer
New Perspectives on DHTML, 2e
Tutorial 2

8. <layer> Attributes
src=“url”
Specifies the URL of the document displayed in the layer
top=“value”
Specifies the vertical offset of the layer, in pixels
visibility=“option” (hide | inherit | show)
Specifies whether the layer is hidden, shown, or inherits its visibility from the layer that contains it
width=“value”
The width of the layer, in pixels
z-index=“value”
Specifies the stacking order of the layer, relative to the other layers
New Perspectives on DHTML, 2e
Tutorial 2

9. Linking a Layer to an HTML File
To link a layer to an HTML file: <layer id=“id” src=“URL”><layer>
Where id is the name of the layer
Where URL is the filename or URL of the external file
New Perspectives on DHTML, 2e
Tutorial 2

10. The <ilayer> and <nolayer> Tags
The <layer> tag uses absolute positioning
The <ilayer> tag uses relative positioning, but provides less JavaScript support
To hide from browsers that do not support the <layer> and <ilayer> tags, use <nolayer>:
<layer src=“Pixal.htm”></layer> <nolayer> <h1>Pixal Products</h1> </nolayer >
New Perspectives on DHTML, 2e
Tutorial 2

11. Working with Layer Objects
To change content of a Netscape 4 layer: document.id.document.write(dynamic content);
Where id is the name of the layer
Where dynamic content is the new content of the layer
The first write() method opens an “input stream” and replaces previous content
Subsequent write() methods append content
New Perspectives on DHTML, 2e
Tutorial 2

12. Working with Layer Objects
To close the input stream: document.id.document.close();
Where id is the name of the layer
If you do not close the input stream, changes will not appear
New Perspectives on DHTML, 2e
Tutorial 2

13. Changing the Source of a Layer Object
To change the source of a NS 4 layer: document.id.src = “URL”;
Where id is the name of the <layer> tag
Where URL is the new source for the layer
New Perspectives on DHTML, 2e
Tutorial 2

14. Resizing the Layer Object
You can resize a layer through JavaScript: document.id.clip.width = width; document.id.clip.height = height;
Where id is the name of the layer object
Where width and height are the new width and height of the layer in pixels
New Perspectives on DHTML, 2e
Tutorial 2

15. Dynamic Content in the Internet Explorer DOM
In IE, nearly any tag can be modified through JavaScript
Use the innerText, outerText, innerHTML, and outerHTML properties to change either text or text with HTML
New Perspectives on DHTML, 2e
Tutorial 2

16. Working with Inner and Outer Properties
The inner portion is any content that lies between a pair of tags
The inner part for <p>: <p><span>Pixal Products</span></p>
The outer portion includes both the tags and the content
The outer part for <p>: <p><span>Pixal Products</span></p>
New Perspectives on DHTML, 2e
Tutorial 2

17. Working with Inner and Outer Properties
To change text within a two-sided tag: object.innerText = “text”;
So change HTML within a two-sided tag: object.innerHTML = “text and HTML code”;
Where object is a two-sided tag
New Perspectives on DHTML, 2e
Tutorial 2

18. Working with Inner and Outer Properties
To change text within a two-sided tag including the tag itself: object.outerText = “text”;
To change HTML code within a two-sided tag and HTML code of the tag itself: object.outerHTML = “text and HTML code”;
New Perspectives on DHTML, 2e
Tutorial 2

19. Inserting Content into a Tag
To insert new text into a two-sided tag: object.insertAdjacentText(“position”, “text”);
To insert new HTML code into a two-sided tag: object.insertAdjacentHTML(“position”, “text”);
Where object is the object on the page
Where position is a value that determines the location of the inserted content:
“BeforeBegin,” “AfterBegin,” “BeforeEnd,” or “AfterEnd”
New Perspectives on DHTML, 2e
Tutorial 2

20. New Perspectives on DHTML, 2e
Linking to an HTML File
To display the contents of another HTML file in IE: <iframe src=“URL” width=“value” height=“value” />
Where URL is the filename or URL of the external file
Where value is the width and height, in pixels
If content is larger than frame size, scroll bars appear
To remove the frame border, add the attribute: frameborder=“no”
New Perspectives on DHTML, 2e
Tutorial 2

21. New Perspectives on DHTML, 2e
Linking to an HTML File
To change the source of an internal frame in IE: document.all.frame.src = “URL”;
Where frame is the id of the internal frame
Where URL is the URL of the new source for the frame
New Perspectives on DHTML, 2e
Tutorial 2

22. Dynamic Content in the W3C DOM
In the W3C DOM, one way to change Web page contents is to
create new objects
then place these in the document’s node tree
New Perspectives on DHTML, 2e
Tutorial 2

23. Dynamic Content in the W3C DOM Creating Objects
document.createAttribute(text)
Creates an attribute node with the attribute name, text
document.createComment(text)
Creates a comment node with the comment text, text
document.createDocumentFragment()
Creates a whole new document object
document.createElement(text)
Creates an element node with the name, text
document.createStyleSheet ([URL] [, index])
Creates a new style sheet. URL and index are optional.
New Perspectives on DHTML, 2e
Tutorial 2

24. Dynamic Content in the W3C DOM Creating Objects
document.createTextNode(text)
Creates a text node containing the text string, text
cloneNode(descendant)
Copies the context node and returns a new object based on the copy
To create a node object and store it in a variable: var newText = document.createTextNode(“Text”);
After the object is created, it must be placed in the document’s node tree
New Perspectives on DHTML, 2e
Tutorial 2

25. Dynamic Content in the W3C DOM Placing Objects in the Node Tree
object.appendChild(new)
Appends the new element to the object element
object.insertBefore(new [, place])
Inserts a new child node into the object node
object.normalize()
Merges the adjacent child text nodes of the object node into a single text node
object.removeChild(node)
Removes a child node named node from the object node
object.removeNode([children])
Removes the object node
New Perspectives on DHTML, 2e
Tutorial 2

26. Dynamic Content in the W3C DOM Placing Objects in the Node Tree
object.replaceChild(new, old)
Replaces the old child node of the object node with a new node
object.replaceNode(new)
Replaces the object node with a new node
object.swapNode(new)
Swaps the object node with the new node
New Perspectives on DHTML, 2e
Tutorial 2

27. Dynamic Content in the W3C DOM Creating and Appending a Text Node
New Perspectives on DHTML, 2e
Tutorial 2

28. Dynamic Content in the W3C DOM Creating and Inserting a Node Structure
New Perspectives on DHTML, 2e
Tutorial 2

29. New Perspectives on DHTML, 2e
Linking to an HTML File
You can use JavaScript to change the source of an internal frame in the W3C DOM as well as in IE
To change the source in the W3C DOM: document.getElementById(“frame”).src = URL;
Where frame is the id of the internal frame
Where URL is the URL of the new source for the frame
New Perspectives on DHTML, 2e
Tutorial 2

30. Page Branching to Separate HTML Files
Page branching is the use of separate pages for differing DOMs or browsers
Page branching should be used when internal branching is impractical
Using the href property, call a function to load the proper page: href = “Javascript:showFile(‘dc100’)”
New Perspectives on DHTML, 2e
Tutorial 2

31. Expanding and Collapsing an Outline
New Perspectives on DHTML, 2e
Tutorial 2

32. Changing Style Attributes
In the IE and W3C DOMs, you can change cascading style attributes: object.style.styleAttribute = value;
Where object is a reference to an object
Where styleAttribute is a CSS style attribute
Where value is the value assigned to the style attribute
New Perspectives on DHTML, 2e
Tutorial 2

33. Changing Style Attributes
CSS attributes are typically converted to JavaScript properties by:
removing the dash in the style name
capitalizing the first letter of the second word
Example:
CSS attribute: background-image
JavaScript property: backgroundImage
New Perspectives on DHTML, 2e
Tutorial 2

34. Changing Multiple Style Attributes and Classes
To change multiple style attributes in the IE and W3C DOMs: object.style.cssText = styles;
Where object is the object reference
Where styles is a text string of style attributes
Example: object.style.cssText = “color:red; font-size:16pt”;
New Perspectives on DHTML, 2e
Tutorial 2

35. Changing Multiple Style Attributes and Classes
You can also change styles by applying classes: object.className = class;
Where object is the object reference
Where class is the name of the style sheet class
New Perspectives on DHTML, 2e
Tutorial 2

36. New Perspectives on DHTML, 2e
Changing Style Sheets
In the IE DOM, you can simultaneously change style for all elements by changing style sheets
First, create multiple global style sheets
Then use the disabled property to set the Boolean value accordingly: id.disabled = value;
Where id is the id of the style sheet
Where value is either ‘true’ or ‘false’
New Perspectives on DHTML, 2e
Tutorial 2

37. Working with Style Sheet Objects
IE and W3C DOMs treat each style sheet as an object which may be referenced:
IE DOM use either: id document.styleSheets[index]
W3C DOM use either: document.styleSheets[index] document.CSSStyleSheets[index]
New Perspectives on DHTML, 2e
Tutorial 2

38. Working with Style Sheet Objects Properties and Methods
cssRules
Collection of rules associated with the style sheet object
NS6, NS7
cssText
The text of the style sheet rules
IE5, IE5.5, IE6
disabled
Disables the style sheet
href
The URL of an external style sheet linked to the Web page
New Perspectives on DHTML, 2e
Tutorial 2

39. Working with Style Sheet Objects Properties and Methodsid
The id of the style sheet
IE5, IE5.5, IE6
rules
Collection of rules associated with the style sheet object
type
The type of style sheet language
NS6, NS7
New Perspectives on DHTML, 2e
Tutorial 2

40. Working with Style Sheet Objects
To disable a style sheet: document.styleSheets[index].disabled = true;
To enable a style sheet: document.styleSheets[index].disabled = false;
To reference a rule in IE DOM: document.styleSheets[index].rules[index]
To reference a rule in W3C DOM: document.styleSheets[index].cssRules[index]
New Perspectives on DHTML, 2e
Tutorial 2

41. Managing Styles with JASS
JASS (JavaScript Accessible Style Sheets) is a means of determining styles as the page loads
JASS generally supports all CSS styles that are supported in NS 4 browsers
Use <style> tags with the type property set to “text/javascript”: <style type=“text/javascript”> JASS commands; </style>
New Perspectives on DHTML, 2e
Tutorial 2

42. Working with Tag Styles
To define a style for a tag in JASS: tags.tagName.attribute = “value”;
Where tagName is the name of the tag
Where attribute is the name of the style attribute
Where value is the value to be assigned to the attribute
New Perspectives on DHTML, 2e
Tutorial 2

43. Working with Tag Styles
To set multiple attributes for a single tag, use the “with” keyword: with (tags.tagName) { attribute1 = “value1” attribute2 = “value2” }
New Perspectives on DHTML, 2e
Tutorial 2

44. Working with Class Attributes
To apply a style to a whole class of elements: classes.className.element.attribute = “value”;
Where className is the name of the class
Where element is the name of the element
Where attribute is the style attribute
Where value is the value assigned to the attribute
New Perspectives on DHTML, 2e
Tutorial 2

45. New Perspectives on DHTML, 2e
Working with ID Styles
To change the style of a single element on the Web page: ids.id.attribute = “value”;
Where id is the id name of the element
Given the CSS style: #Intro {color:red}
The equivalent JASS command is: ids.Intro.color=“red”;
New Perspectives on DHTML, 2e
Tutorial 2

46. Working with Contextual Selectors
CSS contextual selectors allow you to isolate and apply a style to tags nested within tags: p b {color:red}
To do the same in JASS: contextual(selector1, selector2, …).attribute = “value”;
Example: contextual(tags.p, tags.b).color=“red”;
New Perspectives on DHTML, 2e
Tutorial 2

47. Creating an Expandable Outline in Netscape 4
New Perspectives on DHTML, 2e
Tutorial 2

48. New Perspectives on DHTML, 2e
Review
Replacing the content of your Web pages with new, dynamic content requires different approaches
For the NS 4 DOM:
use the document.write method to change content of a NS 4 layer
use document.id.src=“URL” to change the source of a NS 4 layer
New Perspectives on DHTML, 2e
Tutorial 2

49. New Perspectives on DHTML, 2e
Review
For the IE DOM:
use innerText, outerText, innerHTML or outerHTML to change Web page content
use document.all.frame.src=“URL”; to change the source of an inline frame
For the W3C DOM:
use W3C methods to create objects and place the objects in the node tree
use document.getElementById(“frame”).src = “URL”; to change the source of an inline frame
New Perspectives on DHTML, 2e
Tutorial 2

50. New Perspectives on DHTML, 2e
Review
To change CSS style attributes in the IE and W3C DOMs, set the style using object.style.styleAttribute
To change CSS style attributes in the NS 4 DOM, use Netscape’s JASS language
New Perspectives on DHTML, 2e
Tutorial 2