The Dynamic Duo Espaņol      Indonesia   Italiano   Polish [new]

What's New for June 24, 1999

  • DynLayer and the extensions - have moved to using prototypes for all methods of the DynLayer, this won't effect your implementation any except that the Slide and Clip methods are now automatically defined, to add the Glide Methods and other extensions all you need to do is add the js file - the slideInit() and clipInit() are unnecessary (blank fnctions were left so nothing will break).

  • Scroll2 - the new scroll object has been beefed up a bit with easier initialization and a full feature set including some new stuff previously not available you've never seen before. Before reading this section you should read the following lessons: ButtonImage, ScrollWindow, ScrollBar they will explain the full usage and options which are available (the scroll2 is based almost entirely on them). The syntax for many things have changed in the Scroll2 so if you have already implemented a Scroll2 you'll have to read up on how to use this new version.

  • NewsTicker - a new ticker tape type of widget

  • CollapseMenu - a neat menu type of widget that can be used as a Tree widget.

   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 [revised]
  4. DynLayer Extensions [revised]
  5. Geometric Animation Objects
  6. Gif Animation
  7. Path Animation
  8. Using DuoPath
  9. Mouse Events
  10. Drag and Drop Concepts
  11. Drag Object
  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. ButtonImage [new]
  4. ScrollWindow [new]
  5. ScrollBar [new]
  6. Scroll2 [new]
  7. List
  8. SelectList
  9. ScrollList
  10. MenuList
  11. DynWindow
  12. Clock
  13. Calendar
  14. NewsTicker [new]
  15. CollapseMenu [new]

   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
  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
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.

Please read the Acceptable Terms of Usage of the Dynamic Duo

© 1998 Dan Steinman

The Dynamic Duo is hosted by Industrial Dreams