Platinum Edition Using HTML 4, XML, and Java 1.2:Introduction to Dynamic HTML

To access the contents, click the chapter and section titles.

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

Table of Contents

Scripting Positioning Elements

Both Microsoft and Netscape enable you to access the positioning information of individual HTML elements via a scripting language and their object model. Microsoft’s Dynamic HTML object model automatically enables you to set and access the attributes of every tag within an HTML document. This is done with the all object, which is underneath the document object in the Web browser object hierarchy. You can write out the names of all the HTML tags on a page, for instance, with the following:

for (i=0;i < document.all.length;i++) {
   document.write(document.all[i].tagName + “<BR>”)
}

To access a tag’s positioning elements, you simply need a reference to that tag. If the tag has a NAME or ID attribute set for it, this is pretty straightforward. If an <IMG> tag is given the ID=”MyImage” attribute, for instance, you could check the value of its z-index style attribute with

document.write(“MyImage z-index is: ” +
   document.all.MyImage.style.zIndex)

Or, using associative arrays:

document.write(“MyImage z-index is: ” +
   document.all[‘MyImage’].style.zIndex)

NOTE: Notice that the z-index style attribute is scripted using the zIndex property. Dashes cannot be used in an object property name and are replaced by intercaps (the letter immediately after where the dash would have been is capitalized).

Netscape Navigator, on the other hand, enables you to access only the attributes of a subset of the HTML tags within a document—for instance, those tags that either have a style attached to them or that are within a <LAYER> or <ILAYER> container tag. In either case, the syntax for writing scripts to access or change any of the positioning attributes is the same and is referenced through the layers object array of the document object. To look at a similar example as that given above for Internet Explorer, for a layer that has been given the ID=”MyLayer” attribute, you could check its visibility style attribute value with either

document.write(“MyLayer z-index is: ” +
    document.layers.MyLayer.zIndex)

document.write(“MyLayer z-index is: ” +
    document.layers[‘MyLayer’].zIndex)

• See “Referencing Web Browser Objects,” p. 561.

Dynamic Styles with Cascading Style Sheets

Similar to CSS positioning, discussed in the preceding section, both Internet Explorer and Navigator have the capability to specify and/or dynamically change the format and style of HTML elements through style sheets and the object model that each browser uses. Navigator can use JavaScript only to specify formatting styles at load time, whereas Internet Explorer can establish them at load time and also dynamically change them.

Table 9.1 in Chapter 9 gives a very good listing of the formatting attributes of style sheets. These attributes can be manipulated by scripts running in either Netscape Navigator or Microsoft Internet Explorer, although, like CSS positioning, the object reference in each browser differs slightly.

Chapter 25, “Advanced Netscape Dynamic HTML,” and Chapter 26, “Advanced Microsoft Dynamic HTML,” discuss this topic in greater detail. These chapters show you how to use Dynamic HTML in either browser to change the format of your documents on-the-fly.

• See “JavaScript Accessible Style Sheets,” p. 610.

• See “Using Dynamic HTML with Styles,” p. 650.

Listing 24.3 shows an example of an HTML document that uses JavaScript to change the format of its content. This example also demonstrates some of the differences between what can be achieved with Netscape versus Microsoft Dynamic HTML.

Listing 24.3 DynStyle.htm—JavaScript for Specifying and (in Internet Explorer) Changing Formats

<HTML>
<HEAD>
<TITLE>Dynamic HTML Example</TITLE>
<STYLE>
   .clicked {font-size:36pt;color:red}
</STYLE>
<STYLE TYPE=“text/javascript”>
   classes.myClass.P.fontSize = “12pt”
   classes.myClass.P.fontFamily = “Verdana”
</STYLE>
<SCRIPT LANGUAGE=“JavaScript”>
if (navigator.appName == “Netscape”)
   ieflag = false
else
   ieflag = true
function changeStyle() {
   if (ieflag) {
      document.all.tags(“H1”).item(0).className = “clicked”
      document.all.tags(“P”).item(1).style.fontSize = “18pt”
   }
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<CENTER>
<H1>Dynamic HTML and Styles</H1>
<HR>
<P CLASS=“myClass”>
   In this example, JavaScript (or JavaScript Accessible
   Style Sheets, for Navigator) is used to change the
   style of this paragraph when the document is loaded.
   This will work in version 4.0 or higher of either
   Netscape Navigator or Microsoft Internet Explorer.</P>
<P>When you click the button below, the style of the
   heading and this paragraph is changed; however, this
   only works in Internet Explorer.</P>
<HR>
<FORM>
<INPUT TYPE=BUTTON onClick=“changeStyle()” VALUE=“Click Me!”>
</FORM>
<HR>
</CENTER>
<ADDRESS>
Jim O’Donnell, <A HREF=“mailto:odonnj@rpi.edu”>odonnj@rpi.edu</A>
</ADDRESS>
</BODY>
<SCRIPT LANGUAGE=“JavaScript”>
if (ieflag) {
   document.all.tags(“P”).item(0).style.fontSize = “12pt”
   document.all.tags(“P”).item(0).style.fontFamily = “Verdana”
}
</SCRIPT>
</HTML>

Table of Contents

Products | Contact Us | About Us | Privacy | Ad Info | Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.