Working with Dynamic Content and Styles DHTML Tutorial 2 Creating a Product Information Web Site New Perspectives on DHTML, 2e Tutorial 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

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

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

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

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

<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

<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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Working with Style Sheet Objects Properties and Methods id 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

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

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

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

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

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

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

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

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

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

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

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