spacer

home / experts / dhtml / column25 / addendum1
Developer News
Google Going Native With Chrome
Mozilla Fixes Firefox Flaws as 3.5 Release Nears
Microsoft and Novell Still Bosom Buddies

Logo

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:

  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

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
XML and PHP Simplified · Creating a ASP.NET Contact Form · Data Filtering with PHP
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Intel to Host Live Nehalem Q&A · 12 Tips to Troubleshoot Network File-Sharing · 10 Tips for Selling on Kijiji

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

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