DHTML Lab - dhtmlab.com - Dynamic Headline Fader, Version 2.01 | 9

Dynamic Headline Fader, Version 2.01
accounting for dynamic style support in IE4mac

The Problem

An error message, similar to the one below, may appear when loading a page that contains the fader:

or, IE4mac may hang. (Ouch!)

or, IE4mac may crash. (Double Ouch!)

or, IE4mac may work fine.

In this case, the problems originate with these statements:

if (!document.styleSheets.length) document.createStyleSheet();
with (document.styleSheets(document.styleSheets.length-1)) {
   addRule("A.newslink","text-decoration:"
                  +lnkDec+";color:"+ lnkCol);
   addRule("A.newslink:hover","color:"+ hovCol);
}

In Column 25, we described the above statements in the following way:

...we need to create one class, newslink, for the links. We first check to see if there are any stylesheets in the page. If none exist, we create one. This stylesheet-creation-on-the-fly has been discussed in DHTML Diner:

if (!document.styleSheets.length) document.createStyleSheet();

We can then add two style rules to the last stylesheet in the page, to define the newslink class:

with (document.styleSheets(document.styleSheets.length-1)) {
   addRule("A.newslink","text-decoration:"
                  + lnkDec + ";color:" + lnkCol);
   addRule("A.newslink:hover","color:" + hovCol);
}

Problem Breakdown

1. The document.createStyleSheet() method is not supported in IE for Macintosh. If it is called:

   • in IE4mac 4.01, it returns null, instead of the newly created stylesheet object. This is good behavior, as we can check the return value and conditionally execute IE4mac-specific statements. But...

   • in the more recent IE4mac 4.5 (new and improved) it hangs (some non-English versions) or crashes the browser (English and some non-English versions).

2. If we do have an existing stylesheet, then the above problem does not occur, and IE4mac continues execution. It correctly identifies the last stylesheet in the page, (document.styleSheets(document.styleSheets.length-1)) and moves on to apply the stylesheet's addRule() method, but...

3. ...only if the stylesheet-in-question was created with the <STYLE> tag. Stylesheets created with the <LINK> tag, for example:

   <LINK REL="STYLESHEET" HREF="mystsheet.css" TYPE="text/css">

   are recognized, but have no addRule() method. A cryptic error message, like the one above, is displayed instead.

Isn't cross-platform DHTML fun?

The Solution

We won't bother accounting for the 4.01 vs 4.5 behavior or the <LINK> vs <STYLE> behavior.

Our problem can be simply solved by:

Always creating a new stylesheet for IE4mac using the <STYLE> tag, whether one is needed or not. This is accomplished inelegantly, but efficiently, by writing a <STYLE> tag into the document.

So, since we need to identify the browser platform, we create a new variable, IE4mac, which we include at the beginning of fader.js:

IE4mac = (IE4 && navigator.appVersion.indexOf("Mac") != -1);

And, we change this statement:

if (!document.styleSheets.length) document.createStyleSheet();

To read:

if(IE4mac) {
   document.body.insertAdjacentHTML("BeforeBegin","<STYLE></STYLE>");
}
else {
   if (!document.styleSheets.length) document.createStyleSheet();
}

There is still one more, minor fix for IE4mac.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Sep 21, 1999
Revised: Sep 21, 1999

URL: https://www.webreference.com/dhtml/column25/addendum1/fdr201iemac2.html