PSSE - Selecting the correct background using JavaScript

Selecting the correct background using JavaScript

Different web browsers use slightly different layout formats. For example the following test page works correctly with Netscape 4 but not with Netscape 3 (at least on and SGI).

Page without JavaScript
Notice that the background bar doesn't extend far enough right to match up with the title and menu images.

JavaScript can be used to select a different backgroud image if a particular type of browser is detected. Here we look for Netscape 3 or lower and select a different image using JavaScript.

Page with JavaScript

With Netscape 4, both of these example pages should work fine.

How to do this

The JavaScript used in the second example is:

<SCRIPT LANGUAGE="JavaScript">
  // Simeon Warner - 14Apr98
  // Here we are trying to find out what browser and version is being
  // used to correct inconsistencies between versions.
  browserName    = navigator.appName;
  browserVersion = parseInt(navigator.appVersion);
  if ( browserName == "Netscape" ) {
    if ( browserVersion < 4) {
      document.write ("<body background=\"red_back_netscape3.gif\">")
    }
  } 
  // All other browsers will pick up the background outside the script
  // tags. The second body definition will be ignored for browsers 
  // specified in this script (nasty but it works).
</script>
<body background="red_back.jpg" width=900 height=50
  bgcolor=#ffffff link="#330000" vlink="#555555">

Points to notice:

If the browser doesn't recognize JavaScript then that block will be ignored and just the <body background="red_back.jpg" width=900 height=50 bgcolor=#ffffff link="#330000" vlink="#555555"> after the script will be picked up. This is the default.
If browsers find multiple <body ...> tags they seem to take the first background specification they come to (I don't think this is in the specification but it seems to work that way).
If the JavaScript can recognize a particular type of browser then we just specify and additional <body ...> tag with the required background before the default tag. In this case we look for Netscape version 3 or less. Of course more clauses can be added.

[ Up ]

This page is maintained by Simeon Warner
Last updated 14 April 1998