Chapter 12. Building Dynamic Web Pages: Adding Style to Your Script

Back in 1996, I was invited to a confidential author introduction for a new technology that Microsoft planned to roll out within the year. I traveled up from Portland, Oregon to Microsoft's Seattle campus and joined with several other authors and editors from various book companies in a rather nice conference room (with a kicker buffet in the back).

One of the Microsoft managers appeared in front of a projected image of a web page, which wasn't anything to write home about. That is, until he clicked on a header in the page, and the material below the header was pushed down as a previously hidden paragraph. A small thing, and no big thing now, but back then, I was blown away.

This was my first introduction to the concept that became known as Dynamic HTML or DHTML. I eventually went on to write a book on DHTML, as well as several articles dealing with cross-browser DHTML. The key element to the concept was the introduction of a new W3C specification, Cascading Style Sheets, in addition to the concept of Document Object Model, though there was no universal model at the time.

It's through CSS that we can define the appearance of page elements without having to rely on external applications, plug-ins, or excessive use of images. It's also through CSS and stylesheets that we can separate the presentation of page elements from their organization.

However, it was through the DOM that we could access stylesheet properties from JavaScript, changing individual element properties even after the page had finished loading. Combined with CSS, it was a powerful means to make a web page far more interactive than it had been.

The only problem was that each company that then had a major browserNetscape Navigator and Microsoft's Internet Explorer being the most popularimplemented a different DOM, and this made DHTML quite difficult. Although the Version 4 browsers were capable of some amazing effects, they came at a cost. The page had to include code to create the effect that would work in each browser and that would also work with older browsers that didn't have DHTML capability. Primarily due to this difficulty, DHTML languished without extensive use until the more modern browsers such as those that tested the examples in this book. Now, DHTML has awakened new interest, aided and abetted by the amazing popularity of Ajax (covered in Chapters 13 and 14).

As mentioned in Chapter 11, I've had a set of cross-browser DHTML objects and animation objects built on them in one form or another since 1998. A modern variation can be downloaded, as well as several examples of their use, at my Learning JavaScript web site, http://learningjavascript.info.