Dynamic HTML DHTML

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

• Use JavaScript to modify CSS styles
• Work with CSS positioning
• Create DHTML menus
• Learn how to check for browser compatibility

3
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

4
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

5
JavaScript and CSS (Cont.)

• 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

6
JavaScript and CSS (Cont.)

• If you anticipate that your DHTML code will run
  in older browsers
• Learn the DTHML techniques for each type of
  browser

7
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

8
Modifying styles with the this reference (Cont.)

• 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

9
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

10
Modifying Styles with the getElementById() Method
(Cont.)

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

11
Modifying Styles with the getElementById() Method
(Cont.)

• To use the getElementById() method
• Append it to the Document object with a period
• Pass to it the value assigned to the ID attribute
  of the element whose styles you want to manipulate

12
Modifying Styles with the getElementById() Method
(Cont.)

• You assign the value returned from the
  getElementById() method to a variable
• Append the style property and specific CSS
  property to the variable

13
CSS Positioning

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

14
CSS Positioning
15
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

16
Dynamic positioning (Cont.)

• The top property
• Specifies an elements vertical distance from the
  upper-left corner of the window
• Both property values are assigned in pixels

17
DHTML Menus

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

18
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
• Gives a Web page its structure

19
Expandable Menus (Cont.)

• 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

20
Expandable Menus (Cont.)

• 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

21
Expandable Menus (Cont.)

• 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
• Then assign the class name to the class attribute
  of elements in the document that you want to
  format with the classs style definitions

22
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

23
Navigation Menus (Cont.)

• 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

24
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

25
Sliding Menus (Cont.)

• 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

26
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

27
Checking Browser Compatibility (Cont.)

• You can check whether a browser includes the
  getElementById() method
• Use a statement similar to if (document.getElement
  ById)
• If the method is available in the browser, then a
  value of true is returned
• Browser is compatible with the W3C DOM

28
Chapter Summary

• Easiest way 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
• Used to modify an elements CSS properties with
  JavaScript

29
Chapter Summary (cont.)

• The getElementById(ID) method
• Returns the element represented by ID
• The getElementsByTagName(element) method
• Returns a collection of elements represented by
  element
• CSS positioning
• Used to position or lay out elements on a Web
  page

30
Chapter Summary (cont.)

• The position property
• Determines the type of positioning applied to an
  element
• The left and top properties
• Used to dynamically position an element with CSS
• DHTML menus
• Most often used for organizing navigational links
  to other Web pages

31
Chapter Summary (cont.)

• The display property
• Specifies whether to display an element on a Web
  page
• Inline, or text-level, elements
• Describe the text that appears on a Web page
• ltdivgt element
• Formats a group of block-level and inline
  elements with styles

32
Chapter Summary (cont.)

• A class selector
• Defines different groups of styles for the same
  element
• Visibility property
• Used to show and hide each menu
• Sliding menus
• Menus that appear to slide open and closed
• a browser sniffer
• JavaScript program that checks which type of
  browser is running