Beginning JavaScript with DOM Scripting and AJAX

Chapter 5: Presentation and Behaviour

Download all as a zip file (39 KB)

• Changing presentation by accessing the style directly

  • exampleStyleChange.html
  • styleChange.js

• Changing presentation by dynamically adding and removing classes

  • exampleClassChange.html
  • classChange.css
  • classChange.js

• Making it easy to define styles for scripting supported and unsupported versions

  • exampleDynamicStyling.html
  • dynamicStyling.css
  • dynamicStyling.js

• Adding a whole new Style Sheet when DOM is supported

  • exampleStylesheetChange.html
  • lowlevel.css
  • highlevel.css
  • styleSheetChange.js

• Making maintenance easier by keeping the CSS class names in an own object

  • exampleDynamicStylingCSSObject.html
  • cssClassNames.js
  • dynamicStyling.css
  • dynamicStylingCSSObject.js

• Keeping the CSS class names in an own JSON object

  • exampleDynamicStylingJSON.html
  • dynamicStyling.css
  • cssClassNamesJSON.js
  • dynamicStylingJSON.js

• CSS Problem with column heights

  • exampleColumnHeightIssue.html
  • columnHeightIssue.css

• JavaScript fix for the column heights problem

  • exampleFixedColumnHeightIssue.html
  • columnHeightIssue.css
  • fixColumnHeight.js

• Rollover on list items (CSS only)

  This example will not work in MSIE older than version 7!

  • exampleListItemRolloverCSS.html
  • listItemRolloverCSS.css

• Cross-Browser rollover on list items with JavaScript

  • exampleListItemRollover.html
  • listItemRollover.css
  • listItemRollover.js

• Creating two different rollover states on parent elements

  • exampleListItemDoubleRollover.html
  • listItemDoubleRollover.css
  • listItemDoubleRollover.js

• Event Bubbling

  This example will only work in DOM-2 compliant browsers like Firefox!

  • exampleEventBubble.html
  • eventBubble.js

• Supressing Event Bubbling

  This example will only work in DOM-2 compliant browsers like Firefox!

  • exampleStopPropagation.html
  • stopPropagation.js

• Preventing default actions

  This example will only work in DOM-2 compliant browsers like Firefox!

  • examplePreventDefault.html
  • preventDefault.js

• Collapsing and expanding list items

  This example will only work in DOM-2 compliant browsers like Firefox!

  • exampleListItemCollapse.html
  • listItemCollapse.css
  • listItemCollapse.js

• Collapsing and expanding list items (cross Browser)

  • exampleXBrowserListItemCollapse.html
  • xBrowserListItemCollapse.css
  • xBrowserListItemCollapse.js

• Collapsing and expanding list items (shorter)

  • exampleListItemCollapseShorter.html
  • listItemCollapseShorter.css
  • listItemCollapseShorter.js

• Collapsing and expanding list items without initial flashing of content

  • exampleListItemCollapseNoFlash.html
  • listItemCollapseNoFlash.css
  • listItemCollapseNoFlash.js

• Checking which keys were hit to filter keyboard entry

  • exampleKeyChecking.html
  • keyChecking.css
  • keyChecking.js

• Helper functions

  • DOMhelp.js

Back to index

Go to the homepage