Dynamic HTML: The Definitive Reference

[print version of this page]

Cross-Platform Compromises
(cont.)

While the replaceable image object is still a part of Navigator 4, if for no other reason than backward compatibility, this version of the browser has added even more dynamic capabilities.

Cascading Style Sheets Level 1

Navigator 4 includes support for the majority of the CSS1 recommendation. CSS1 style sheets are not as dynamic in Navigator 4 as you might wish, however. Styles and properties of content already loaded in the browser cannot be changed. To do something like flash the color of a block of text, you must create the content for each color as a separate positioned element that can be hidden and shown with the help of a script.

JavaScript Style Sheet Syntax

To further support the use of JavaScript in Navigator 4, Netscape has devised an alternate syntax for setting style attributes that uses JavaScript. The "dot" syntax for specifying styles follows the syntax of the core JavaScript language, rather than the CSS1 attribute:value syntax. The TYPE attribute of the <STYLE> tag lets you define the style sheet syntax you are using for a definition.

For example, the following samples set the left margin for all <H1> elements in a document to 20 pixels, using CSS1 and JavaScript syntax, respectively:

<STYLE TYPE="text/css">
H1 {marginLeft:20px}
</STYLE>

<STYLE TYPE="text/javascript">
tags.H1.marginLeft=20
</STYLE>

The JavaScript style sheet syntax is supported only in Navigator, whereas the CSS1 syntax is supported in both Navigator and Internet Explorer.

CSS-Positioning

Navigator supports the CSS-P recommendation as it was defined in the most recent working draft prior to the release of Navigator 4. You can use the cascading style sheet syntax to define items on a page whose location and visibility can be changed after a document has fully loaded. If an element is positionable, its style sheet rule must include the position attribute. In the following example, positioning attributes are set for an element that identifies itself with an ID of item1:

<STYLE type="text/css">
#item1 {position:absolute; top:50px; left:100px}
</STYLE>

In the body of the document, the style sheet rule is connected to an element by assigning item1 to the ID attribute of an element (a DIV element in this example):

<DIV ID="item1">
<IMG SRC="myFace.jpg" HEIGHT=60 WIDTH=40>
</DIV>

Alternatively, you can use the STYLE attribute (from CSS1-type style sheets) inside the affected element to set position properties:

<DIV STYLE="position:absolute; top:50; left:100">
<IMG SRC="myFace.jpg" HEIGHT=60 WIDTH=40>
</DIV>

A positionable container is reflected as an object in the Navigator document object model. Each of these objects has a number of properties and methods that a script can use to move, clip, hide, and show the content of that container.

Layers

A Netscape-specific alternative to CSS-Positioning utilizes a document model object created with the <LAYER> tag. You can think of each layer as a content holder that exists in its own transparent plane above the base document in the window. Many graphic programs, such as Photoshop, use the same metaphor.

The content, position, and visibility of each layer are independent of the base document and any other layer(s) defined within the window. Layers can also be created anew by JavaScript (with the Layer() constructor) after a page has been loaded, allowing for the dynamic addition of new content to a page (content in its own layer, rather than inserted into the existing content space).

Content for a layer is defined as HTML content, most often loaded in from a separate HTML file. As a result, each layer contains its own document object, distinct from the base document object. Such a document may also include definitions for additional layers, which can be nested as many levels deep as needed for the application design.

As document model objects, layer objects have properties and methods that are accessible to JavaScript. As a convenience for cross-platform compatibility, Navigator treats a positionable element defined via CSS-P syntax or the <LAYER> tag as the same kind of object. The same scriptable properties and methods are associated with both kinds of positionable elements in Navigator.

Limited Dynamic Content

Navigator 4's document object model is only slightly enhanced over the first model that appeared in Navigator 2. Once a document has loaded into a window or frame, a script can do very little to modify a portion of the page without reloading the entire document. Swapping images in place, loading new content into a layer, and setting the location of a positionable element are about as far as you can go in making HTML content dynamic in Navigator 4.

Event Capturing

When you script positionable elements, it is often convenient to have user actions handled not by the specific objects being clicked on, typed into, or dragged, but by scripts that encompass a range of related object behaviors. Navigator 4 supports objects that have this broader view-window, document, and layer objects specifically-and can intercept events before they reach their intended targets. A script then has the flexibility to respond to the event and either let the event pass on to the target or even redirect the event to another target.

Downloadable Fonts

A document to be displayed in Navigator 4 can include a CSS style attribute or a <LINK> tag that instructs the browser to download a Bitstream TrueDoc font definition file. Each font definition file can contain more than one font definition, so one reference to a font file can load all the necessary fonts for a page. Here are the two techniques for downloading a font:

  <STYLE TYPE="text/css">
  @fontdef url("http://www.mySite.com/fonts/Fonts.pfr")
  </STYLE>

  <LINK REL=fontdef 
      SRC="http://www.mySite.com/fonts/Fonts.pfr">

Once a font has been downloaded into the browser, it is applied to text by way of the <FONT FACE="faceName"></FONT> tag set.

more ...