Cross Browser IE 4.0+ and NN 4.x DHTML

With a little ingenuity we can rework simple DHTML to work with both IE 4.0+ and NN 4.x browsers.

Small Changes within Pages

If the tags required for the IE and NN versions of a piece of code are the same and it's just some of the properties or methods in our code that'll need changing, then it's fairly easy to accommodate IE and NN browsers in one page. The easiest way to achieve this is by testing for certain properties of a browser object that you know are only supported by a specific browser. In the examples we have kept things simple and just checked for document.all and document.layers. However, in the real world we'd want to check every single property/method if we want to be 100 percent sure the browser supports it before we try to use it.

For example, we can use the all collection property of the document to test for IE 4+ and all browsers supporting the IE4+ way of doing DHTML, and we can use the layers array property of the document to test for just NN 4.x. If the property does exist, JavaScript treats it as true. If the property does not exist, undefined is returned, which JavaScript treats as false. It may seem strange that when a property of an object does not exist, undefined is returned rather than an error occurring, but that's simply the way JavaScript objects work. In our case this is a bonus.

if (document.all)
{
   alert("Use IE 4+ code here");
}
else if (document.layers)
{
   alert("Use NN 4.x code here")
}
else
{
   alert("Put your other code here");
}

This is an ideal method for simple code differences. For example, say we have a <div> with id myDiv, which we've positioned absolutely (so that an implicit Layer object is created for it in NN 4.x) and we want to change its background color. In IE, we use the following code to do this:

myDiv.style.backgroundColor = "blue";

In NN 4.x, however, the same thing is achieved by the following line:

document.myDiv.bgColor = "blue";

Such small changes are easily accommodated in a single page.

Another important point is that while NN 4.x supports the <layer> and <ilayer> tags, they are in fact best avoided in favor of a relatively or absolutely positioned <div> tag if possible. If you know that the page you'll be creating will be very different between IE 4+ and NN 4.x browsers, a separate page will be needed for each browser, and avoiding use of the <layer> tag is much less important. However, if the differences won't need a separate page, using <div> is likely to make coding much easier to write and has the advantage that the <div> tag is supported by IE 4+, NN 4, and NN 6. The <layer> tag is strictly NN 4.x only.

Try It Out – Moving Tags Again

Let's see how this might work in practice by changing the moving tags examples that we created for IE and NN. Originally both versions were strictly for one or other browser, but with just a few minor changes we can make it work with both.

We'll use the Netscape version, and we need to make only very simple changes for it to work under IE. The general rule is that anything NN 4 can do IE 4+ can do too, but some things that IE 4 can do NN 4 cannot. For example, while NN 4 supports moving of <P> tags positioned with style sheets, bugs in Netscape mean this can be unreliable. The NN 4 version moved a <div> with a paragraph inside and this will work fine on IE 4+ with the following changes to the code.

Open up NNMovingTags.htm and make the following changes:

function moveParas()
{
   if (switchDirection == false)
   {
      paraOneLeft++;
      paraTwoLeft--;
      if (paraOneLeft == 400)
      {
         switchDirection = true;
      }
   }
   else
   {
      paraOneLeft--;
      paraTwoLeft++;
      if (paraOneLeft == 100)
      {
         switchDirection = false;
      }
   }
   var para1Style;
   var para2Style;
   if (document.all)
   {
      para1Style = para1.style;
      para2Style = para2.style;
   }
   else if (document.layers)
   {
      para1Style = document.para1;
      para2Style = document.para2;
   }
   else
   {
      para1Style = document.getElementById("para1").style;
      para2Style = document.getElementById("para2").style;
   }
   para1Style.left = paraOneLeft;
   para2Style.left = paraTwoLeft;
}

Save this page as MovingTags_NN_IE.htm and load it into IE 4+, NN 4.x, or NN 6/7. It'll work fine with all of them.

How It Works

In this example, the other thing that differs is the object for which we need to set the left property. How do we get to this object?

In IE 4+ and Netscape 6, it's the Div object's style property that has the left property we need to change. With NN 4.x, it's the left property of the Layer object that is created for the style sheet positioned <div> tag. Our goal is to set the variables para1Style and para2Style to reference the objects with the left property that needs changing.

First we check to see if the browser supports document.all.

if (document.all)
{
   para1Style = para1.style;
   para2Style = para2.style;
}

IE 4+ is the main browser to support this property, though some minor browsers also use it, so if it is IE 4+, the if statement's condition will be true and the variables para1Style and para2Style will be set to the style objects of the relevant <div> tags.

Next we check to see if the layers array property of the document object is supported.

else if (document.layers)
{
   para1Style = document.para1;
   para2Style = document.para2;
}

Only Netscape 4.x supports this property, so the code inside the curly braces will be executed only if it's NN 4.x. This code sets our para1Style and para2Style variables to reference the Layer object that was created for the <div> tags.

Finally, in the else statement at the end we have our NN 6 compatible code.

else
{
   para1Style = document.getElementById("para1").style;
   para2Style = document.getElementById("para2").style;
}

This retrieves references to the <div> tags we're moving by using the getElementById() method of the document object. This is only supported by NN 6 and IE 5+ and is part of the W3C Document Object Model (DOM). Don't worry too much about it now. We'll be seeing it in a lot more detail in the next chapter when we look at DOM-compliant code.

Finally, we can set the left property of the object referenced in the para1Style and para2Style variables.

   para1Style.left = paraOneLeft;
   para2Style.left = paraTwoLeft;

While this code will work fine on any DHTML browser, basically with IE 4+ and NN 4+, we still need to redirect users with older browsers to a nice simple static page. We'll look at how to do this next.

Redirecting the Browser

At times what one browser can achieve, other browsers can't. Or it could be that it can be achieved, but the code and tags required for each version are so radically different, as in our menu systems, that attempting to have more than one version on a single page would be exceptionally difficult or impossible. If this is the case, the best thing is to have a different page for each and redirect the user to the correct page after doing the sort of browser version checking we discussed in Chapter 5.

We can use either checking for the existence of properties and methods, for example document.all or document.layers, or checking the browser version as we saw in Chapter 5 on the Browser Object Model to check to see which browser has loaded the page. With that information we can redirect the user to the appropriate page using the location object's replace() method.

Let's see how we could add this to our dynamic menu systems so that if an NN 4.x browser has loaded the IE version, or an IE 4+ browser has loaded the NN 4.x version, they redirect to the correct version.

Starting with the IEMenus.htm version, the following code needs to be added at the very top of the first script block.

if (!(document.all))
{
   if (document.layers)
   {
      window.location.replace("NNMenus.htm");
   }
   else
   {
      window.location.replace("NoMenus.htm");
   }
}

The first if statement's condition says that if document.all is not true, execute the code in the block. The exclamation mark outside the parentheses containing the document.all reverses the logic to give us our not.

So if a browser that does not support document.all (remember only IE 4+ supports this) has loaded this page, the code inside the if statement's curly braces will execute. This code checks to see whether the browser supports layers—that is, whether it is NN 4.x. If it does, we replace the page loaded with the NNMenus.htm page. If it is not true, we replace the page with a NoMenus.htm page, which we'd need to create.

The code that needs to be inserted at the top of the first script block in NNMenus.htm is shown here:

if (!(document.layers))
{
   if (document.all)
   {
      window.location.replace("IEMenus.htm");
   }
   else
   {
      window.location.replace("NoMenus.htm");
   }
}

This is very similar in principle to the IE version, except we are checking that the browser does not support layers; that is, we are confirming that it is not NN 4.x. If it does not support layers, we check to see whether it supports the document.all property—that is, whether it is IE 4+. If it is, we replace this page with the IEMenus.htm page. Otherwise, we load a NoMenus.htm page.