The Dynamic Duo

What's new for April 19, 1999:

  1. Search The Dynduo with MiniSearch v0.1 - I'm building my own little search engine for searching this site. This is the first usable beta version, there's many planned feature improvements and is freely available.
  2. DynAPI Code Browser - built a neat new code viewer for viewing the source of the files in the DynAPI. This is now what pops up when you click the View Source button on any js files in the tutorial. It is an example of using server-side scripts with a DHTML front-end.
  3. Scroll2/ScrollList - the new Scroll is now compatible with the ScrollList widget. You can grab the js file from the latest DynAPI archive.

What's new for April 8, 1999:

  1. Scroll2 - the new version of the Scroll object is ready enough to replace most uses of the older version. It's not 100% complete but very pleased with the way it's turning out.

Translation of this tutorial:

As I mentioned, people have begun work on translating this tutorial to other languages. I only speak english, so translated versions would not be possible without the help from other generous individuals who would like to give something back to the JavaScript community. The languages currently being worked on are Spanish, French, German, and Chinese. If you are interested in doing a translation into a language you speak please email me.

   DHTML Tutorial download  

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. Changing Images/Rollovers
  9. Clipping Layers
  10. Nesting Layers

Advanced Topics

  1. Keystroke Events
  2. Audio Controls
  3. Layer Writing
  4. Changing Styles
  5. External Source Files
  6. Working With Forms
  7. Generated Layers
  8. Using Browser Width/Height
  9. Page Templates

Object-Oriented DHTML

  1. Creating New Objects
  2. BrowserCheck Object
  3. The Dynamic Layer Object API
  4. DynLayer Extensions
  5. Geometric Animation Objects
  6. Gif Animation
  7. Path Animation
  8. Using DuoPath
  9. Mouse Events
  10. Drag and Drop Concepts
  11. Drag Object [revised]
  12. Creating and Destroying Layers
  13. CGI Communication
  14. DHTML Buttons
  15. Radio Buttons
  16. CheckBoxes
  17. Scroll Concepts

Reuseable Components

  1. Creating Reusable Widgets
  2. Scroll
  3. Scroll2 [new]
  4. List
  5. SelectList
  6. ScrollList
  7. MenuList
  8. DynWindow
  9. Clock
  10. Calendar

   DynAPI Project

Many of the lessons in the tutorial make use of JavaScript files contained in the DynAPI

   DHTML Demos
  1. Bumble Bee
  2. Smart Blocks
  3. Pull-Out Menus [minor bug fixed]
  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

Downloads
DHTML Forum
Search this site [new]
Links to other DHTML resources

To view the examples in this site you must use either Netscape 4.0 or Internet Explorer 4.0

This tutorial is written and maintained by Dan Steinman (dynduo@dansteinman.com)

Please post general questions about DHTML to my DHTML Forum. I would be happy to answer e-mails if you have a very specific problem, however do try to debug your code significantly enough to determine what part of your script isn't working properly. And be sure to read through this entire tutorial before posting or e-mailing any questions, this tutorial is very thorough and will likely answer your question somewhere.

I do appreciate any comments or suggestions you have about this tutorial. I am always looking for ways to improve it, so if you have anything to contribute I would be most gracious.

I am available for contract/freelance work, and advertising opportunities are a possibility. Please inquire about these to me directly.

Please read the Acceptable Terms of Usage of the Dynamic Duo

© 1998 Dan Steinman

The Dynamic Duo is hosted by Industrial Dreams