New Perspectives on DHTML, 2e

1
Working with Dynamic Content and Styles

• DHTML Tutorial 2Creating a Product Information
  Web Site

2
Objectives

• Create Web pages with contents that change in
  response to user actions
• Learn about Netscape 4s ltlayergt tag
• Display the contents of an external file in
  either a layer or an inline frame

3
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

4
Working with Dynamic Content

• Dynamic ContentWeb page content that changes in
  response to user actions

5
Working with Dynamic Content

• Different approaches for DOMs
• IE and W3C DOMAll page content accessible to
  scripting language
• NS 4 DOMUse JavaScript to rewrite sections of
  page and then redisplay those sections

6
Using the ltlayergt Tag in Netscape 4

• To create dynamic content in Netscape 4 ltlayer
  idid attributesgt document content
  lt/layergt
• 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

7
ltlayergt Attributes
8
ltlayergt Attributes
9
Linking a Layer to an HTML File

• To link a layer to an HTML fileltlayer idid
  srcURLgtltlayergt
• Where id is the name of the layer
• Where URL is the filename or URL of the external
  file

10
The ltilayergt and ltnolayergt Tags

• The ltlayergt tag uses absolute positioning
• The ltilayergt tag uses relative positioning, but
  provides less JavaScript support
• To hide from browsers that do not support the
  ltlayergt and ltilayergt tags, use ltnolayergt
• ltlayer srcPixal.htmgtlt/layergtltnolayergt
  lth1gtPixal Productslt/h1gtlt/nolayer gt

11
Working with Layer Objects

• To change content of a Netscape 4
  layerdocument.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

12
Working with Layer Objects

• To close the input streamdocument.id.document.cl
  ose()
• Where id is the name of the layer
• If you do not close the input stream, changes
  will not appear

13
Changing the Source of a Layer Object

• To change the source of a NS 4 layerdocument.id.
  src URL
• Where id is the name of the ltlayergt tag
• Where URL is the new source for the layer

14
Resizing the Layer Object

• You can resize a layer through JavaScriptdocumen
  t.id.clip.width widthdocument.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

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

16
Working with Inner and Outer Properties

• The inner portion is any content that lies
  between a pair of tags
• The inner part for ltpgtltpgtltspangtPixal
  Productslt/spangtlt/pgt
• The outer portion includes both the tags and the
  content
• The outer part for ltpgtltpgtltspangtPixal
  Productslt/spangtlt/pgt

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

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

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

20
Linking to an HTML File

• To display the contents of another HTML file in
  IEltiframe srcURL widthvalue
  heightvalue /gt
• 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
  frameborderno

21
Linking to an HTML File

• To change the source of an internal frame in
  IEdocument.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

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 documents node tree

23
Dynamic Content in the W3C DOMCreating Objects
24
Dynamic Content in the W3C DOMCreating Objects

• To create a node object and store it in a
  variablevar newText document.createTextNode(T
  ext)
• After the object is created, it must be placed in
  the documents node tree

25
Dynamic Content in the W3C DOMPlacing Objects in
the Node Tree
26
Dynamic Content in the W3C DOMPlacing Objects in
the Node Tree
27
Dynamic Content in the W3C DOMCreating and
Appending a Text Node
28
Dynamic Content in the W3C DOMCreating and
Inserting a Node Structure
29
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
  DOMdocument.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

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 pagehref JavascriptshowFile(dc10
  0)

31
Expanding and Collapsing an Outline
32
Changing Style Attributes

• In the IE and W3C DOMs, you can change cascading
  style attributesobject.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

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

34
Changing Multiple Style Attributes and Classes

• To change multiple style attributes in the IE and
  W3C DOMsobject.style.cssText styles
• Where object is the object reference
• Where styles is a text string of style attributes
• Exampleobject.style.cssText colorred
  font-size16pt

35
Changing Multiple Style Attributes and Classes

• You can also change styles by applying
  classesobject.className class
• Where object is the object reference
• Where class is the name of the style sheet class

36
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 accordinglyid.disabled value
• Where id is the id of the style sheet
• Where value is either true or false

37
Working with Style Sheet Objects

• IE and W3C DOMs treat each style sheet as an
  object which may be referenced
• IE DOM use eitherid document.styleSheetsindex
  
• W3C DOM use eitherdocument.styleSheetsindex
  document.CSSStyleSheetsindex

38
Working with Style Sheet ObjectsProperties and
Methods
39
Working with Style Sheet ObjectsProperties and
Methods
40
Working with Style Sheet Objects

• To disable a style sheetdocument.styleSheetsind
  ex.disabled true
• To enable a style sheetdocument.styleSheetsinde
  x.disabled false
• To reference a rule in IE DOMdocument.styleSheet
  sindex.rulesindex
• To reference a rule in W3C DOMdocument.styleShee
  tsindex.cssRulesindex

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 ltstylegt tags with the type property set to
  text/javascriptltstyle typetext/javascriptgt
  JASS commandslt/stylegt

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

43
Working with Tag Styles

• To set multiple attributes for a single tag, use
  the with keywordwith (tags.tagName)
  attribute1 value1 attribute2 value2.
  . .

44
Working with Class Attributes

• To apply a style to a whole class of
  elementsclasses.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

45
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 styleIntro colorred
• The equivalent JASS command isids.Intro.colorr
  ed

46
Working with Contextual Selectors

• CSS contextual selectors allow you to isolate and
  apply a style to tags nested within tags p b
  colorred
• To do the same in JASScontextual(selector1,
  selector2, ).attribute value
• Example contextual(tags.p, tags.b).colorred

47
Creating an Expandable Outline inNetscape 4
48
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.srcURL to change the source of
  a NS 4 layer

49
Review

• For the IE DOM
• use innerText, outerText, innerHTML or outerHTML
  to change Web page content
• use document.all.frame.srcURL 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

50
Review

• To change CSS style attributes in the IE and W3C
  DOMs, set the style using object.style.styleAttrib
  ute
• To change CSS style attributes in the NS 4 DOM,
  use Netscapes JASS language