If you're tired of programming manuals that start with trivial details and examples and illustrate only the most basic demos, then this book is for you. In Dynamic HTML: The HTML Developer's Guide you will learn DHTML the same way you probably learned HTML--by looking at other people's source code.
Because scripting with DHTML is much more complex than with regular HTML, many web developers are hesitant to begin learning this vital technology. Dynamic HTML is a valuable resource to help you master this important new skill. Both a comprehensive reference guide and a clear tutorial, this book explains the principles behind DHTML and, using a learn-by-example approach, enables you to acquire techniques for effective DHTML scripting. Inspired by the author's web-based DHTML Demos, this book contains solid examples of DHTML that can be taken apart and plugged into existing web pages for dynamic effects.
Among its key features, Dynamic HTML offers:
The companion web site for this book, which includes sample code, demos referenced in the book, and working examples, is located at http://www.ruleweb.com/dhtml/index.html
Web designers and developers have been waiting for pull-down and pop-out menus to appear on the web for years. Traditionally, they have had to deal with pull-down menus that existed as part of forms. These text menus have a number of design problems. First, they are rendered as text, so they size differently in different browsers and on different operating system. Nothing drives designers crazy like inconsistent layout. Second, the text menus look terrible from a designer's point of view. These problems have limited their use as navigational structures on the web.
Designers and web developers have really been looking for pull-down menus that are customizable and can be constructed from graphic elements. Users are very familiar with pull-down menus. Ever since the Macintosh computer came onto the scene in 1984, the pull-down menu has defined how hierarchical information is presented to the user. Until now, this familiarity has not extended to the web. Instead, navigational structure has been handled in many different ways. The most popular method was the left-side navigation bar that was first used by C|Net back when Netscape 1.2 initially came out. While this navigation structure has proved very popular, it provides no way to present deeper levels of information without loading a new page. Pull-down menus add an extra level of depth to sites and make this information available to the user without having to present it on a new page.
Many sites make use of pop-out menus on their main pages. IBM (http://www.ibm.com), for example, uses a hierarchical menu to give a broad overview of its offerings. At Discovery, we use pop-out menus on the home page for Internet Explorer 4. One problem that we have at Discovery, and that all large web sites share, is exposing the depth of content found on the first page. Home pages for sites try to be both "magazine cover" and "table of contents" all on the same page. At Discovery, we use the pop-out menus to show many of our big stories from the last several weeks. This setup "drives" users down into the site and immerses them in our environment. Holding the user's attention and getting him or her to look at the full range of your product offerings represents one of the greatest challenges to today's web designers. Pop-out and pull-down menus are part of the solution.Pop-Out Menus
These menus pop out from the side of the screen, almost always the left side. They are often represented by a tab that remains the only part showing until it is clicked on. The full menu is then revealed. Pop-out menus can be activated by several events, such as mouseovers, mousedowns, or onclicks. They can animate from the side of the screen or simply appear in their new locations. The pop-out menus illustrated in this chapter simply appear.
I'm not convinced that animation adds to the functionality. If you would like to add animation, however, you can use the cross-platform scripts in Chapter 9.Pull-Down Menus
Pull-down menus are found in virtually all modern graphical operating systems. They are typically aligned across the top of the screen. When clicked on, they drop down to reveal more options.
Menus work equally well in both Netscape and Internet Explorer browsers. You should not experience any technical problems.
The most important problem you will encounter derives from the visibility property of Cascading Style Sheet Positioning (CSS-P). Netscape uses the nonstandard Hide and Show parameters to determine visibility. Internet Explorer uses the W3C standard Visible and Hidden parameters. The scripts provided in this chapter work around this issue by using alternative scripts for the two browsers.
Pull-down and pop-out menus are built around positioning and the event model. When one graphic is clicked on, then another appears. When the graphic is clicked on a second time, it disappears. A variable is set to 1 or 0 each time the image is clicked. This tactic keeps track of whether the menu should be hidden or shown.
The two examples in the remainder of this chapter are very similar; their only real difference is in direction.
This example simulates a pull-down menu from the Discovery Channel Online site (Figure 7-1). When you click on the menu bar, a selection of choices from the Discovery site is revealed. Listing 7-1 gives the code for this simulation (located at http://www.ruleweb.com/dhtml/Pull_Down_Menu/xplatform.html).
Table of Contents
The Future of Web Content.
Other Scripting/Programming Languages.
Desperately Seeking Standards.
Style Sheets (CSS) Compatibility.
Scripting Language Compatibility.
Alternative Pages Using Browser Detection.
Alternative Scripts Using Object Detection.
2. The Document Object Model (DOM).
Netscape 4.0's DOM.
Internet Explorer 4.0's DOM.
3. Cascading Style Sheets: A Brief Introduction.
Cascading Style Sheet Support in Browsers.
Differences Between Internet Explorer 4 and Netscape 4.
Cursors in Internet Explorer 4.
DIV and SPAN Tags.
Differences Between Layers and Style Sheets.
Linking DIV Tags and Style Sheets.
Placement of Style Sheets
Positioning of Elements on the Screen.
Margins, Padding, and Borders.
Width and Height.
Background Color and Image.
The Future: CSS2.
Browser Compatibility with Mouseover Scripts.
Swapping the Image Object.
Multiple Images Displayed on Rollover.
5. Transitions and Filters.
Transitions in Internet Explorer 4.
Between-Page Transitions (Interpage Transitions).
Same-Page Transitions (Intrapage Transitions).
Filters in Internet Explorer 4.
Transitions in Netscape.
Other Wipe Variations.
6. Resizing Graphics.
Growing a Graphic to Fill the Screen.
Show and Collapse.
Moving While Resizing.
Bulge (Internet Explorer 4).
Move While Resizing (Internet Explorer 4).
7. Pull-Down and Pop-Out Menus 95
8. Drag and Drop.
Controls and Interface Design.
Internet Explorer 4.
Types of Animations.
Netscape 4 Point-to-Point Animation.
Internet Explorer 4 Point-to-Point Animation.
Cross-Platform Path Animation.
10. Timelines and Sequencing.
Active X and VBScript.
Active X and VBScript.
11. Internet Explorer 4's Multimedia Controls.
The Sequencer Control.
The Sprite Control.
The Structured Graphics Control.
The Path Control.
Creating the PFR File.
Preparing the Server.
Formatting Style Sheets and the FONT Tag.
Formatting with Cascading Style Sheets.
Notes on Netscape 4's Font Handling.
WEFT: The Encoding Tool.
Compatibility Between Netscape 4 and Internet
13. Creating Channels.
Evolution of Push Technology.
Channel-Based Push Technology.
Defining Web Pages as Channels.
Creating a Channel via Netscape's Wizard.
Active Channel Content.
14. The Version 5 Browsers.
Internet Explorer 5.
Netscape Communicator 5.
Technical Limits and Underlying Technology.
Dynamic HTML Behaviors.
15. The Future.
Allaire Cold Fusion (Sun and Windows NT).
Macromedia Backstage (Windows NT).
XML: Data Just the Way You Want It.
CSS2 and XSL: Giving a Backbone to the Data.
Business Will Keep Us Together.
Appendix A. Dynamic HTML Authoring Tools.
Incorporating Mbedlets into a Web Page.
RoundTrip HTML Editing.
For Whom Is This Book Intended?
Dynamic HTML: The HTML Developer's Guide is designed for the people that do the grunt work of web development. These individuals take graphics from the art department and text from the editors and then work magic with tables to achieve the right appearance. They update Internet sites and intranet sites. Caffeine and stress are key ingredients in their lives. Their nontechnical bosses can't seem to figure out why it's so hard to put up a page, because "After all, the graphics and words are already done!" These bosses want a cool pop-out menu that they saw on the Discovery Channel site or the flying logo they saw when their kids were at the Disney site last night.
This book is for the oppressed masses, who cry out for an example they can take apart and understand! It provides Dynamic HTML demos that are explained in clear, no-nonsense language.
What Is Dynamic HTML?
Who Am I?
My name is Jeff Rule, and I work at Discovery Channel Online (http://www.discovery.com), which is the online presence of the Discovery Channel cable network. Discovery is a top-40 content web site developed at Bethesda, Maryland. I began working in CD-ROM development back in 1993 by doing CD-ROM projects and computer-based training (CBT), mainly in Macromedia's Authorware and Director products. I'd also done some basic HTML. When Shockwave first emerged, however, I really got interested in the web.
At Discovery I'm in charge of Dynamic HTML and other high-end web multimedia development, such as Shockwave. I also look at "bleeding-edge" technology, which is how I first encountered Dynamic HTML. But it's not bleeding-edge technology anymore, I promise!
Companion Web Site
The companion web site for this book is DHTML Demos, located at http://www.ruleweb.com/dhtml/index.html. I started this site back in September 1997 as a source of Internet Explorer 4.0 demos. Later, as I gained a better understanding of the differing document object models (DOM), I began creating Netscape-compatible demos. The site originated as a showcase for the Dynamic HTML work I was doing at Discovery Channel, allowing our editors to see some of the possibilities of Dynamic HTML and its possible applications for the stories we were working on. It later escaped to the web and now makes its home at RuleWeb, my development company.
Since its inception, the site has grown substantially. Today, it is one of the more trafficked Dynamic HTML sites on the web. At the site you will find the demos referenced in this book as well as additional demos. Other users can also access the site, but cannot enter the members-only area reserved for owners of this book. Look to this site for code, working examples, and for the latest information on the emerging field of DHTML.
Philosophy of the Book
The site continued to grow and I received lots of questions about the demonstrations, but I didn't have time to respond to even a fraction of the messages I received. This book is an attempt to explain those demonstrations in detail and take the code apart, line by line. This method will help you, the developer, to use this code in your own pages. At the same time, you will understand it enough that you can modify the code and create new scripts.
If there is one thing I believe in on the web, it's the VIEW SOURCE command. I hope this book goes even further in explaining the code you see in your View Source window.
What You'll Need to Use this Book
These browsers are currently the only ones in which Dynamic HTML works.