WebReference.com - Part 2 of Chapter 6 from Designing with JavaScript (2/4) | WebReference

WebReference.com - Part 2 of Chapter 6 from Designing with JavaScript (2/4)

To page 1current pageTo page 3To page 4
[previous] [next]

Designing with JavaScript, 2nd Edition

For the sake of simplicity, the body of the page is very brief. When the mouse moves over the image link, the code inside the onMouseOver event handler is run. This code uses the dynamic image feature of JavaScript to change the image (named travel) so that it appears highlighted. The important part of this event handler is the if statement; it allows the image to be highlighted only if browser is equal to "rollover", that is, the browser is capable of handling dynamic images. (Don't worry about understanding how the rollover works right now; we'll be discussing rollovers in detail in Chapter 7. For now, all you need to understand is how the browser detection works.)

A much more common use of browser detection these days is for pages that use Dynamic HTML (DHTML), which has a number of dependencies on browser version. (We'll be discussing DHTML in more detail in Chapter 9 and Chapter 10.) If your page uses a single DHTML element that can easily be replaced by standard HTML for browsers that don't support DHTML, you might consider using browser detection around that element to handle different browsers. At a minimum, you need four different branches, for Netscape 6, for IE 4 and later, for Navigator 4, and for all earlier browser versions, as shown in Example 6-6.

<title>A Smart DHTML Page</title>
<script language="JavaScript">
var browserName = navigator.appName;
var browserVersion = parseInt(navigator.appVersion);
var browser;
if (browserName == "Netscape" && browserVersion >= 5) {
    browser = "nn6up";
else if (browserName == "Netscape" && browserVersion == 4) {
    browser = "nn4";
else if (browserName == "Microsoft Internet Explorer" && 
         browserVersion >= 4) {
    browser = "ie4up";
<script language="JavaScript">
// Branches for different DHTML implementations plus standard HTML version
if (browser == "nn6up") {
    // Netscape 6 (DOM standard) DHTML goes here
else if (browser == "nn4") {
    // DHTML specific to Netscape Navigator 4 goes here
else if (browser == "ie4up") {
    // Microsoft-specific DHTML goes here
else {
    // Standard HTML replacement goes here

Example 6-6: Simple browser detection for DHTML

After determining which browser is being used, this script provides locations for three different implementations of a DHTML element, plus a place to put the standard HTML replacement. As you can imagine, if you are integrating DHTML throughout your page design, supporting these four branches will quickly cause your pages to get quite messy. In that case, you should probably use a different technique for browser detection, like the single-frame method that is discussed in the next section.

To page 1current pageTo page 3To page 4
[previous] [next]

Created: December 17, 2001
Revised: December 17, 2001

URL: http://webreference.com/programming/javascript/designing/chap6/2/2.html