Dynamic HTML DHTML

1
JavaScript, Third Edition
Chapter 10
Dynamic HTML (DHTML)
2
Introduction

• DHTML requires a strong knowledge of XHTML,
  Cascading Style Sheets (CSS), and JavaScript
• Specifically, you will learn
• How to use JavaScript to dynamically modify CSS
  styles and dynamically position elements
• How to create DHTML menus and check for browser
  compatibility

3
JavaScript and CSS

• Earlier versions of Internet Explorer and
  Navigator supported incompatible Document object
  properties and methods
• JavaScript uses Document object properties and
  methods to access CSS styles

4
JavaScript and CSS

• To manipulate CSS in older browsers, you had
  three options
• Write code that functioned only in Navigator
• Write code that functioned only in Internet
  Explorer
• Write both sets of code and design the script so
  that correct set would execute depending on which
  browser rendered the page

5
Modifying styles with the this reference

• To refer to a CSS style in JavaScript
• Use the this reference and the style property in
  an event handler within the element itself
• The style property
• Use it to modify an elements CSS properties with
  JavaScript

6
Modifying styles with the this reference

• To refer to a style with the this reference
• Use a period to append the style property to it,
  followed by another period and a CSS property
• Exampleltp onclick"this.style.color'blue'"gtBlu
  e stuff.lt/pgt

7
Modifying styles with the this reference

• Turn off underlining in anchor elements.
• Change this a color FFCC00
• To thisa color FFCC00
  text-decoration none

8
Modifying styles with the this reference

• Use onmouseover and onmouseout to turn on and off
  underlining on all anchor elements.
• Change this
• lta href"SkywardHome.html"gtHomelt/agtltbr /gt
• To this
• lta href"SkywardHome.html"
• onmouseover"this.style.textDecoration'underline'
  "
• onmouseout"this.style.textDecoration'none'"gtHom
  elt/agt
• ltbr /gt

9
Modifying styles with the this reference

• Use JavaScript functions to turn on and off
  underlining on all anchor elements. Pass this
  reference to the function.
• Change this
• lta href"SkywardHome.html"
• onmouseover"this.style.textDecoration'underline'
  "
• onmouseout"this.style.textDecoration'none'"gtHom
  elt/agt
• ltbr /gt
• To this
• lta href"SkywardHome.html"
• onmouseover"underlineOn(this)"
• onmouseout"underlineOff(this)"gtHomelt/agtltbr /gt

10
Modifying styles with the this reference

• curLink receives this reference.
• Add two JavaScript functions
• function underlineOn(curLink)
• curLink.style.textDecoration"underline"
• function underlineOff(curLink)
• curLink.style.textDecoration"none"

11
Modifying Styles with the getElementById( ) Method

• To modify CSS properties without using the this
  reference
• First gain access to the styles by using either
• The getElementById(ID) method OR
• The getElementsByTagName(element) method

12
Modifying Styles with the getElementById( ) Method

• The getElementById(ID) method returns the element
  represented by ID
• The getElementsByTagName(element) method returns
  a collection of elements represented by element

13
Modifying Styles with the getElementById( ) Method

• To use the getElementById( ) method
• Append it to the Document object with a
  perioddocument.getElementById(ID)
• Pass to it the value assigned to the IDattribute
  of the element whose stylesyou want to manipulate

14
Modifying Styles with the getElementById( ) Method

• You assign the value returned from the
  getElementById( ) method to a variablevar
  myVariable document.getElementById(ID)
• Append the style property and specific CSS
  property to the variablemyVariable.style.color
  "blue"

15
Modifying Styles with the getElementById( ) Method

• Modify the functions using getElementById instead
  of the this reference.
• Change this
• function underlineOn(curLink)
• curLink.style.textDecoration"underline"
• To this
• function underlineOn(curLink)
• var selectedLink document.getElementById(curLin
  k)
• selectedLink.style.textDecoration"underline"

16
Modifying Styles with the getElementById( ) Method

• Add ID attributes and pass the IDs to the
  functions
• Change this
• lta href"SkywardHome.html"
• onmouseover"underlineOn(this)"
• onmouseout"underlineOff(this)"gtHomelt/agtltbr /gt
• To this
• lta href"SkywardHome.html" id "home"
• onmouseover"underlineOn('home')"
• onmouseout"underlineOff('home')"gtHomelt/agtltbr
  /gt

17
CSS Positioning

• Used to position or lay out elements on a Web
  page

18
CSS Positioning
19
Dynamic positioning

• Easiest way to dynamically position an element
  with CSS
• Use left and top properties
• Left property
• Specifies an elements horizontal distance from
  the upper-left corner of the window
• Top property
• Specifies an elements vertical distance from the
  upper-left corner of the window
• Both property values are assigned in pixels

20
Dynamic positioning

• To position an image in different locations
• ltpgtltimg src"airplane.gif"
• style"position absolute left 300px top
  40px"
• alt "Image of an airplane" height"76" width
  "141" /gtlt/pgt
• ltpgtltimg src"airplane.gif"
• style"position absolute left 420px top
  0px"
• alt "Image of an airplane" height"76" width
  "141" /gtlt/pgt
• ltpgtltimg src"airplane.gif"
• style"position absolute left 560px top
  40px"
• alt "Image of an airplane" height"76" width
  "141" /gtlt/pgt

21
Dynamic positioning
Add a variable to track the position of the
airplane var flightPattern 0

• Create an array to hold 12 left positions
• var flightPatternLeft new Array(12)
• flightPatternLeft0 "300px"
• flightPatternLeft1 "325px"
• flightPatternLeft2 "350px"
• flightPatternLeft3 "375px"
• flightPatternLeft4 "400px"
• flightPatternLeft5 "425px"
• flightPatternLeft6 "450px"
• flightPatternLeft7 "475px"
• flightPatternLeft8 "500px"
• flightPatternLeft9 "525px"
• flightPatternLeft10 "550px"
• flightPatternLeft11 "575px"

• Create an array to hold 12 top positions
• var flightPatternTop new Array(12)
• flightPatternTop0 "40px"
• flightPatternTop1 "30px"
• flightPatternTop2 "20px"
• flightPatternTop3 "10px"
• flightPatternTop4 "0px"
• flightPatternTop5 "10px"
• flightPatternTop6 "20px"
• flightPatternTop7 "30px"
• flightPatternTop8 "40px"
• flightPatternTop9 "30px"
• flightPatternTop10 "20px"
• flightPatternTop11 "10px"

22
Dynamic positioning

• Add a function to cycle through the airplane
  positions
• function flightCoordinates()
• var flight document.getElementById("airplane")
  
• flight.style.left flightPatternLeftflightPatte
  rn
• flight.style.top flightPatternTopflightPattern
  
• flightPattern
• if (flightPattern 12)
• flightPattern 0
• Replace three ltimggt elements with one with an id
  attribute
• ltpgtltimg src"airplane.gif" id"airplane"
• style"position absolute left 300px top
  40px"
• alt "Image of an airplane" height"76" width
  "141" /gtlt/pgt
• Add an onload to the opening body tag
• ltbody onload"setInterval('flightCoordinates()',
  300)"gt

23
DHTML Menus

• Types include
• Expandable menus
• Navigation menus
• Sliding menus.
• DHTML menus are most often used for organizing
  navigational links to other Web pages

24
Expandable Menus

• The display property
• Specifies whether to display an element on a Web
  page
• Can be used to simulate expandable and
  collapsible menus on a Web page
• Used with a block-level element (ltpgt lth1gt ltdivgt)
• Gives a Web page its structure

25
Expandable Menus

• Inline, or text-level, elements
• Describe the text that appears on a Web page
• Unlike block-level elements, they do not appear
  on their own lines
• Appear within the line of the block-level element
  that contains them
• Examples ltbgt ltbr /gt

26
Expandable Menus

• ltdivgt element
• Formats a group of block-level and inline
  elements with styles
• By placing elements and text within a ltdivgt
  element, you can use the display property to
  simulate expandable and collapsible menus
• display property of "none" - element is not
  displayed
• display property of "block" - element is
  displayed
• document.getElementById('idName').style.display"b
  lock"

27
Expandable Menus

• A class selector
• Defines different groups of styles for the same
  element
• You create a class selector within a ltstylegt
  element by
• Appending a name for the class to a selector with
  a period div.className
• Then assign the class name to the class
  attribute of elements in the document that you
  want to format with the classs style
  definitions ltstyle type "text/css"gt
  div.className display none lt/stylegt

name of class
selector
28
Expandable Menus

• Exampleinstrument.docinstrument.html

29
Navigation Menus

• Menus
• Can greatly improve the design of the Web page
• Are very useful in helping visitors navigate
  through the Web site
• Easiest way to create a navigation menu
• Use a table to contain your menu items
• Nest a table for the submenu items within a
  larger menu of items

30
Navigation Menus

• Visibility property
• Used to show and hide each menu
• Determines whether an element is visible
• Differs from the display property in that it
  allocates space for an element on a Web page
• document.getElementById("idName").style.visibilit
  y"visible"
• document.getElementById("idName").style.visibilit
  y"hidden"

31
Navigation Menus

• Example
• SkywardHome.doc
• SkywardHome.html

32
Sliding Menus

• Menus that appear to slide open and closed
• Although the visibility and display properties
  are quite effective in showing and hiding menus
• They simply display their associated elements
  without any sort of effect

33
Sliding Menus

• In order to simulate a sliding effect
• Use the left and top properties along with simple
  animation techniques
• With a horizontal navigation menu, you must
  create each individual menu within its own table

34
Sliding Menus

• ExamplesPrivatePilot.docPrivatePilot.html

35
Checking Browser Compatibility

• Browser sniffer
• JavaScript program that checks which type of
  browser is running
• Easiest way to test whether a Web browser is
  compatible with the W3C DOM
• Check whether the browser includes the
  getElementById( ) method

36
Checking Browser Compatibility

• You can check whether a browser includes the
  getElementById( ) method
• Use a statement similar to if
  (document.getElementById)
• If the method is available in the browser, then a
  value of true is returned
• Browser is compatible with the W3C DOM
• if (document.getElementById)
• document.location.href "MyPageDHTML.html"
• else
• document.location.href "MyPageNoDHTML.html"

37
Homework Assignments

• Typed multiple-choice and true/false questions
  on pages 498 - 500 (skip questions 4, 5, 10, 11,
  15, 16, and 18)
• Projects 10-1 and 10-4
• Case Project 10-2
• Due Monday 12/18/06 by 200pm
• Late assignments will not be accepted
• Envelope can be slid under the door of room 212
• Remember to pass in your flash drive, a printout
  of all html code and a printout of the
  multiple-choice and true/false answers all in a
  9" x 11½ " envelope with your name on it