The Dynamic Duo

News Jan 26 2002:

I'm still getting quite a lot of email asking for Mozilla (Gecko/Netscape 6) support for DynAPI 1, and thankfully Robert Clary has posted his port of DynAPI 1 to Mozilla. For a drop in replacement to "" download:
Thanks Robert!

I am planning a complete replacement for this tutorial as well as a commercially supported set of widgets and tools that work along with DynAPI 2.9. Version 2.9 is my revamp of DynAPI2, it was released a short time ago and is available for download here. This is considered the latest developement version of DynAPI.

Please note that if you are using scripts and code explained in this tutorial it is not necessary for you to change your code around just to keep up with the latest releases of DynAPI 2. "If it ain't broken, don't fix it" is a good principle to go by. The topics covered and code explained in this tutorial are still great ways to create cross-browser scripts. But if you're interested in experimenting with the new features that DynAPI 2 brings, I encourage you to learn more about it at these sites:

   DHTML Tutorial

The Basics

  1. Overview
  2. Cascading Style Sheets Positioning
  3. Cross-Browser JavaScript
  4. Hiding and Showing
  5. Moving
  6. Sliding
  7. Mouse Click Animation
  8. Keystroke Events
  9. Clipping Layers
  10. Nesting Layers
  11. Changing Images/Rollovers
  12. Layer Writing
  13. Changing Styles
  14. External Source Files
  15. Working With Forms
  16. Page Templates

The DynLayer API

  1. Introduction to Object Oriented DHTML
  2. BrowserCheck Object
  3. Overview of The DynLayer
  4. Initializing DynLayers
  5. DynLayerInit Function
  6. DynLayer Properties
  7. DynLayer Mouse Events
  8. Hide, Show, Move Methods
  9. Slide Methods
  10. Clip Methods
  11. Write Method
  12. css() and DynLayerTest() Functions
  13. How To Extend The DynLayer
  14. Common Extensions
  15. Wipe Methods
  16. Glide Methods

DynAPI Components

  1. Geometric Animation Objects
  2. JavaScript GIF Animation
  3. Path Animation
  4. Using DuoPath
  5. Document Mouse Events
  6. Drag and Drop Concepts
  7. Drag Object
  8. Creating and Destroying Layers
  9. CGI Communication
  10. Audio Controls
  11. Generating Layers
  12. Using Browser Width/Height
  13. Cookie Functions

DynAPI Widgets

  1. Creating Reusable Widgets
  2. Scroll
  3. ButtonImage
  4. Radio Buttons
  5. CheckBoxes
  6. Scroll Concepts
  7. MiniScroll
  8. ScrollWindow
  9. ScrollBar
  10. Scroll2
  11. DynWindow
  12. Clock
  13. Calendar
  14. NewsTicker
  15. List
  16. SelectList
  17. ScrollList
  18. MenuList
  19. MenuBar
  20. CollapseMenu
  21. PushPanel
  22. Tabs

   Download the Tutorial

You may download the tutorial for offline reading purposes. In order to browse and use the tutorial as online you must also download the DynAPI (see below).

Download latest DynDuo:

Download the PDF version:

   DynAPI Project

The DynAPI is a library of JavaScript files for building DHTML applications. Most of the lessons in the tutorial make use of these files.

Download latest DynAPI:

   DHTML Demos
  1. Bumble Bee
  2. Smart Blocks
  3. Pull-Out Menus
  4. Solar System
  5. Bouncing Ball
  6. Follow The Leader
  7. Search Engine

   DHTML Games
  1. Puzzle Game
  2. StarThruster 1000
  3. StarThruster 2000
  4. JavaScript Tetris

Search This Site
Links to other DHTML resources

This tutorial is written and maintained by
Dan Steinman

© Copyright 2002 Dan Steinman