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

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

current pageTo page 2To page 3To page 4
[next]

Designing with JavaScript, 2nd Edition

Different browsers, different needs

[The following is a continuation of our series of excerpts from Chapter 6 of O'Reilly's Designing with JavaScript, 2nd Edition.]

Telling your visitors to "choose the Netscape-enhanced site" or "click here if you have Internet Explorer" isn't very elegant. With JavaScript, you can choose automatically for your visitors and save them the trouble. The technique you should use for handling browser-specific features depends on how much your pages rely on those features. Sometimes you'll just need to wrap browser detection code around an isolated element on a page. In other cases, you may want to create completely different pages for different browsers.

Bits and pieces

Back in the early days of JavaScript, browser detection was often used to determine whether to take advantage of image rollovers on a web page (we'll be discussing this feature in more detail in Chapter 7). Rollover images were supported as of Navigator 3 and IE 4, but not in earlier browsers, so web sites that used these dynamic images needed to check the browser version and behave accordingly. Today, of course, it is pretty safe to assume at least a Version 4 browser, so browser detection for rollovers isn't really necessary, unless you need to support very old browsers (e.g., Navigator 2 and IE 3).

If you want to use rollovers and you do need to support very old browsers, you can use browser detection to tailor your page to do the right thing. This approach works well with rollovers, because if they aren't supported, you can show a static image without affecting the overall layout of your page.

Figure 6-1: Circular images that use rollovers, if supported by the browser
Figure 6-1: Circular images that use rollovers, if supported by the browser

Figure 6-1 shows a page that uses simple rollovers. When the user moves the mouse over the circular images at the bottom of the page, the shadows are reversed, making it clear that these are active buttons. This script starts by checking for Navigator 3 or later, or IE 4 or later. If the browser meets these criteria, browser is set to "rollover"; otherwise, it is set to "norollover". Example 6-5 demonstrates how browser detection can be wrapped around a single rollover.

<html>
<head>
<title>A Smart Rollover Page</title>
<script language="JavaScript">
var browserName = navigator.appName;
var browserVersion = parseInt(navigator.appVersion);
var browser;
// Determine whether rollovers are supported
if ((browserName == "Netscape" && browserVersion >= 3) ||
   (browserName == "Microsoft Internet Explorer" && browserVersion >= 4)) {
    browser = "rollover";  
}
else {
    browser = "norollover";
}
</script>
</head>
<body>
<a href="travel.html"
   onMouseOver="if (browser=='rollover') 
                document.travel.src='travel_on.gif';">
<img name="travel" src="travel_off.gif" border="0" height="77" 
     width="83"></a>
</body>
</html>

Example 6-5: Browser detection for a simple rollover script


current pageTo page 2To page 3To page 4
[next]

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


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