Chapter 10 Dynamic HTML (DHTML) JavaScript, Third Edition

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

JavaScript, Third Edition 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

JavaScript, Third Edition 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

JavaScript, Third Edition 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

JavaScript, Third Edition 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

JavaScript, Third Edition 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 element’s CSS properties with JavaScript

JavaScript, Third Edition 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

JavaScript, Third Edition 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

JavaScript, Third Edition 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

JavaScript, Third Edition 11 Modifying Styles with the getElementById() Method (Cont.) To use the getElementById() method: 1.Append it to the Document object with a period 2.Pass to it the value assigned to the ID attribute of the element whose styles you want to manipulate

JavaScript, Third Edition 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

JavaScript, Third Edition 13 CSS Positioning Used to position or lay out elements on a Web page

JavaScript, Third Edition 14 CSS Positioning

JavaScript, Third Edition 15 Dynamic positioning Easiest way to dynamically position an element with CSS: –Use left and top properties Left property: –Specifies an element’s horizontal distance from the upper-left corner of the window

JavaScript, Third Edition 16 Dynamic positioning (Cont.) The top property: –Specifies an element’s vertical distance from the upper-left corner of the window Both property values are assigned in pixels

JavaScript, Third Edition 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

JavaScript, Third Edition 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

JavaScript, Third Edition 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

JavaScript, Third Edition 20 Expandable Menus (Cont.) element: –Formats a group of block-level and inline elements with styles –By placing elements and text within a element, you can use the display property to simulate expandable and collapsible menus

JavaScript, Third Edition 21 Expandable Menus (Cont.) A class selector: –Defines different groups of styles for the same element You create a class selector within a 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 class’s style definitions

JavaScript, Third Edition 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

JavaScript, Third Edition 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

JavaScript, Third Edition 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

JavaScript, Third Edition 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

JavaScript, Third Edition 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

JavaScript, Third Edition 27 Checking Browser Compatibility (Cont.) 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

JavaScript, Third Edition 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 element’s CSS properties with JavaScript

JavaScript, Third Edition 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

JavaScript, Third Edition 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

JavaScript, Third Edition 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 element: –Formats a group of block-level and inline elements with styles

JavaScript, Third Edition 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