The Dynamic Duo

What's new for March 27, 1999:

  1. DynAPI - I'm now distributing all the JavaScript files independently of the tutorial. This set of libraries is licensed under the GNU Library General Public License (LGPL) which means they are open-source, re-distributable and modifiable so long as they remain in the public domain. Any modifications to these JavaScript files must also be released publically for download - but it would be preferred if you send your changes directly to me to develop the codebase more. My intent is to encourage more of a community of development of the best set of JavaScript libraries for creating Dynamic HTML.

    The Dynamic Duo tutorial will serve only as the documentation for this API, and to provide examples. Please visit the DynAPI page for a summary of included files, and a list of possible areas where you can help out.

  2. BrowserCheck Object - this is how I'm going to be checking the browser from now on. I haven't changed everything in the tutorial to use this, mostly the stuff in the DynAPI files and related examples. It's included in the DynLayer.
  3. DynLayer - now IE 5.0 compatible. Only a few things had to change in the DynLayer for everything else in the tutorial to be compatible in IE 5.0 (glad you're using an API now aren't ya?). I took a quick whiz through the most of examples and I think I'm totally compatible now. Please email me if you discover something I missed.
  4. New Scroll - I've started building a new version of the Scroll Object. This is only an experimental version that you can play around with, it by no means can displace the existing Scroll Object yet.
  5. Using Browser Width/Height - added a liquid effect (derivative of the resize fix).
  6. Drag Lessons - I've split the Mouse Events explanation from the Drag Concepts, both have been reworked using the DynLayer (previously it was just using target variables). The Drag Object has been only slightly updated.

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 [revised]
  9. Page Templates

Object-Oriented DHTML

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

Reuseable Components

  1. Creating Reusable Widgets
  2. Scroll
  3. New Scroll [experimental]
  4. List
  5. SelectList [IE4/5 bug fixed]
  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
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