Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

CHAPTER 25
Advanced Netscape Dynamic HTML

by Eric Ladd and Jim O'Donnell

In this chapter

Different Approaches to Dynamic HTML 604

The Three Main Elements of Netscape’s Dynamic HTML 605

JavaScript Accessible Style Sheets 610

Content Positioning 618

Putting the “Dynamic” in Dynamic HTML with JavaScript 621

Animated Buttons Using Layers 624

Dynamic HTML Pop-Up Menus 628

Downloadable Fonts 631

Different Approaches to Dynamic HTML

In Chapter 24, “Introduction to Dynamic HTML,” you learned about the different claims as to what constitutes Dynamic HTML as put forward by Netscape and Microsoft. The two claims have a number of similarities—the differences lie in the implementation. Both takes on Dynamic HTML involve the following ideas:

•  Positioning content on a page, either absolutely or relative to where the content would otherwise go

•  Use of a Web Browser Object Model to make all or part of a document accessible to a scripting language

•  The capability to download fonts to a user’s machine so that your pages are displayed with the typefaces you designate

Again, the differences are in how you implement each of the preceding ideas on Navigator or Internet Explorer. Both browsers more or less conform to the Cascading Style Sheets 1 (CSS1) recommended standard for content positioning, for example, but Netscape also has a proprietary HTML tag that can do many of the same things. Another difference is in the scripting language. Navigator uses JavaScript, whereas Internet Explorer uses its own JScript, which is largely compatible with Netscape’s JavaScript, but not completely. Internet Explorer’s object model is much more extensive than Navigator’s. The mechanism that each program uses to download fonts to a user’s hard drive is different. The list could go on and on, but the point is that if you develop a Dynamic HTML document for one browser, it is likely that it will not work in the other. This might hinder your development efforts if your audience is using a mix of browsers. If you are developing for a consistent desktop platform (a corporate intranet, for example, where everyone is using the same browser), however, you can make use of one definition of Dynamic HTML or the other and not have to worry about your content being lost on some users.

---

NOTE:  Microsoft’s version of Dynamic HTML also calls for dynamic redisplay and reformatting of dynamic content, attaching data from an external source to an HTML element, and multimedia capabilities using ActiveX Controls. Netscape Navigator does not support these additional Dynamic HTML components.

---

This chapter digs deeper into Netscape’s implementation of Dynamic HTML on the Netscape Navigator 4.0 browser. By more closely examining Netscape’s approach to Dynamic HTML and considering some examples, you will be better prepared to develop pages for a user base that has Navigator as its “standard-issue” browser.

---

A Standard Deployment of Dynamic HTML?

Even if your entire audience is using one browser or another, you should also keep in mind that people are working on a standard deployment of some of the common Dynamic HTML elements listed at the start of the chapter. This means that you could develop Dynamic HTML content for one browser or another, and it may never be considered “standard.”

Content positioning by Cascading Style Sheets is covered in the CSS specification found at http://www.w3.org/Style/. The good news here is that both major browsers more or less conform to the standard.

Additionally, the World Wide Web Consortium (W3C) is working on a Document Object Model (DOM), the details of which are covered at http://www.w3.org/DOM/. Both Netscape’s and Microsoft’s Web Browser Object Models are extensions of the W3C DOM.

Chapter 27, “Cross-Browser Dynamic HTML,” contains more tips on how to create Web pages that use Dynamic HTML and that can be successfully viewed with both Netscape Navigator and Microsoft Internet Explorer.

---

•  See “What Is Cross-Browser Dynamic HTML?,” p. 670.

The Three Main Elements of Netscape’s Dynamic HTML

Netscape considers something to be Dynamic HTML if it includes the following three major elements:

•  Styles sheets accessible through the browser object model

•  Content positioning in two and three dimensions

•  Downloadable fonts

Netscape Navigator supports the Cascading Style Sheet specification just like other browsers do, but what makes its support dynamic is that style sheet elements are part of the Navigator browser object model. This means that you can specify style information through JavaScript in addition to the CSS way of doing it. Figure 25.1 shows a Web page that formats content style through both JavaScript and CSS (see Listing 25.1). As you can see, it is possible to manipulate the same style parameters with either method.

Listing 25.1 StyleApp.htm—JavaScript and CSS Styles

<HTML>
<HEAD>
<STYLE TYPE=“text/css”>
.css {color: red;
      font-family: Comic Sans MS;
      font-size: 18pt;
      line-height: 18pt;
      margin-left: 40px}
</STYLE>
<STYLE TYPE=“text/javascript”>
document.tags.P.color = “blue”;
document.tags.P.fontFamily = “Verdana”;
document.tags.P.fontSize = “12pt”;
document.tags.P.fontWeight = “bold”;
document.tags.P.lineHeight = “20pt”;
document.tags.P.marginLeft = “80px”;
</STYLE>
<TITLE>Applying Styles: CSS vs JavaScript</TITLE>
</HEAD>
<BODY>
<H1>Applying Styles: CSS vs JavaScript</H1>
<HR>
<P><EM>[JavaScript Syntax]</EM><BR>
   In this example, we show that styles can be changed in
   Netscape Navigator using either CSS or JavaScript syntax.
   This paragraph gets its style with &lt;STYLE&gt; information
   assigned to the &lt;P&gt; tag via JavaScript.</P>
<HR>
<P CLASS=“css”><EM>[CSS Syntax]</EM><BR>
   In this example, we show that styles can be changed in
   Netscape Navigator using either CSS or JavaScript syntax.
   This paragraph gets its style via a style sheet class
   defined using CSS syntax.</P>
<HR>
<ADDRESS>
Jim O’Donnell, <A HREF=“mailto:odonnj@rpi.edu”>odonnj@rpi.edu</A>
</ADDRESS>
</BODY>
</HTML>

FIGURE 25.1  Navigator enables you to specify style parameters using a couple of syntaxes.

Note the object orientation of the JavaScript code in Listing 25.1. The first style assignment says “set the color property of the P property of the tags property of the document property to blue.” The Navigator browser object model makes many tags available to you in this way.

	The document object reference is understood whenever you reference the tags object. Thus, instead of saying
	document.tags.P.color = “blue”;
	you can equivalently say
	tags.P.color = “blue”;