The Dynamic Duo Espaņol      Indonesia   Italiano   Polish

Oct 24, 1999: Oct 24, 1999

After taking a hiatus from working on the tutorial I have returned with plently of new stuff to keep you busy.

New Server

I'm on a new server now, this will give me the opportunity to expand this site tremendously. I have an anonymous ftp site where all downloads will be kept: ftp.dansteinman.com/pub/. I'll probably set up a list server newsletter for the DynAPI and DynDuo in the near future. I'll probably split the forum into 3 separate ones: "DHTML General", "DynAPI Development" "DynAPI Bugs" etc.

Re-organization

I'm placing much more emphasis on the DynAPI (location has changed), I pulled most of the examples into the DynAPI and flattened the directory structure of the tutorial. If you have any links to specific lessons in this tutorial they are now broken :) I'll work on some specific documentation for the DynAPI in the form of a Package listing with the syntax. Translated versions of the tutorial will work in much nicer now. The translations linked at the top are not in the new format. If those authors or anyone else wants to help convert to the new structure please let me know - I have a few more to put up yet (french, dutch).

New and Updated Lessons

And plenty of them... of particular interest will be:

  1. Document Mouse Events - I've extracted the necessary mouse event controls from the Drag and Scroll2, and worked it into a nice DynAPI file to be used for all document-mouse handling, all Drag and Drop and Scroll2 examples are now using this file.
  2. Drag and Drop Concepts - changed it around to correspond with the new mouseevents code, and added events such as onDragStart, and I have made a "Drop Target" system to easily determine if a layer has been dropped onto another layer.
  3. a completely rewritten DynWindow which is not quite complete yet, stay tuned for updates to this
  4. I'm building a dhtml-based web calendar which required a more sophisticated Calendar Object
  5. MenuList now supports rollovers, and there's now a cooresponding MenuBar object.
  6. a neat ScrollWindow addition: PushPanel
  7. Tabs Object for some nice application-like tabs for swapping layers

Note: These have not been thoroughly tested in IE, I'll probably release another update shortly to correct errors.

   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 [updated]
  6. Drag and Drop Concepts [updated]
  7. Drag Object [updated]
  8. Creating and Destroying Layers
  9. CGI Communication
  10. Audio Controls
  11. Generating Layers
  12. Using Browser Width/Height
  13. Cookie Functions [new]

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 [updated]
  12. Clock
  13. Calendar [updated]
  14. NewsTicker
  15. List [updated]
  16. SelectList
  17. ScrollList
  18. MenuList [updated]
  19. MenuBar [new]
  20. CollapseMenu
  21. PushPanel [new]
  22. Tabs [new]

   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:
dynduo-19991024.zip

   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:
dynapi-19991024.zip

   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

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 (dan@dansteinman.com)
http://www.dansteinman.com

Please post general questions about DHTML to my DHTML Forum. I would prefer to answer questions from there. If you have not read the tutorial please do not post questions or email me. This tutorial is very thorough and will likely answer your question somewhere. 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, .

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.

© copyright 1998 Dan Steinman