Beginning JavaScript with DOM Scripting and AJAX

Chapter 7: JavaScript and User Interaction - Navigation and Forms

Download all as a zip file (69 KB)

• Using a select box for navigation

  • exampleSelectNavigation.html

• Using a select box for navigation (safer method)

  • exampleSaferSelectNavigation.html

• In-page navigation with anchors and targets (buggy in MSIE)

  • exampleLinkedAnchors.html
  • linkedAnchorsBuggy.css

• In-page navigation with anchors and targets (fixed)

  • exampleLinkedAnchorsFixed.html
  • linkedAnchorsPlain.css

• Dynnamic in-page navigation with anchors and targets (panel style)

  • exampleLinkedAnchorsPanel.html
  • linkedAnchorsPanel.css
  • innerNav.js

• Dynnamic in-page navigation with anchors and targets (tab style)

  • exampleLinkedAnchorsTabs.html
  • linkedAnchorsTabs.css
  • innerNav.js

• Dynnamic in-page navigation with anchors and targets (using name instead of index)

  • exampleLinkedAnchorsTabsNamed.html
  • linkedAnchorsTabs.css
  • innerNavNamed.js

• Example of a site-wide menu

  • exampleSiteNavigation.html
  • exampleHighlightedSiteNavigation.html
  • siteNavigation.css

• Example of a dynamic site-wide menu

  • exampleDynamicSiteNavigation.html
  • siteNavigation.js
  • siteNavigation.css

• Example of a dynamic site-wide menu with an indicator image

  • exampleIndicatorSiteNavigation.html
  • siteNavigationIndicator.js
  • siteIndicatorNavigation.css

• Pagination of data sets

  • examplePagination.html
  • pagination.js
  • pagination.css

• Example HTML form

  • exampleForm.html
  • form.css

• Bulk changing of checkboxes

  • exampleFormCheckboxes.html

• Reading and changing radio buttons

  • exampleFormRadioGroup.html
  • formRadioGroup.js

• Changing a submit button when the form is sent

  • exampleChangeSubmitButton.html

• Working with select boxes

  • exampleSelectChoice.html

• Hiding and showing connected form elements

  • exampleDynamicForm.html
  • dynamicForm.js

• Enabling and disabling connected form elements

  • exampleDynamicFormDisable.html
  • dynamicFormDisable.js

• Helper functions

  • DOMhelp.js

Back to index

Go to the homepage