Sams Teach Yourself HTML 4 in 24 Hours

Sams Teach Yourself HTML 4 in 24 Hours

By Dick Oliver

Being Compatible with Incompatible Browsers

With all the layers in place, and users of under-powered browsers properly warned, the only thing left to do is write a little JavaScript to slide the "intro" layer onto the page.

Unfortunately, that's not quite true. There are still some ugly browser-compatibility issues to resolve first. You've seen how to offer some level of compatibility with browsers that support neither style sheet positioning nor JavaScript. If you want a page that works out in the real world, you also need to be ready for Web browsers that understand older versions of JavaScript but still can't handle advanced stuff like layer animation. If you don't detect and divert those browsers, anyone using those browsers to view your DHTML pages may see all sorts of strange behavior and error messages.

To make matters worse, the two most popular Web browsers use incompatible scripting languages. For some simple applications, like those presented in Hour 19, "Web Page Scripting for Non-Programmers," Netscape Navigator and Microsoft Internet Explorer are compatible enough to write simple scripts that work in both browsers; when you try to do more interesting things, such as moving overlapping layers of text and graphics around, Netscape's JavaScript and Microsoft's JScript are just not talking the same language.

None of this would be a big deal if you were creating Web pages for a corporate intranet where all employees always used exactly the same software. (Such corporations do exist, I'm told, although I'm not sure I believe it.) Most of us, however, want our pages to look good to anyone who pulls them off the Internet, no matter what Web browser they are using. At the very least, we'd like our fancy interactive bells and whistles to work with the latest browsers from Netscape and Microsoft, and perhaps gracefully offer a less exciting page to users of any other Web browser.

Time for the bad news: Achieving this level of compatibility is a huge headache. The good news is that I already got the headache for you, had a beer, got over it, and wrote the necessary scripts so you don't have to. I won't even try to teach you enough to understand how I did it, but if you take a look at Figure 20.6. I will tell you what the JavaScript does and why.

20fig06.gif

Figure 20.6 You can link this slide.js JavaScript file to your own pages to give them instant cross-browser Dynamic HTML compatibility.

TIP

As mentioned in Hour 19, you can either type a script directly into a Web page, between the <script> and </script> tags, or you can put the script in a separate file and indicate the filename with a src attribute in the <script> tag. The Web page in Figure 20.3 uses the latter approach to include the slide.js script listed in Figure 20.6. This allows you to use the same script in as many Web pages as you want without having to maintain multiple copies of the script itself.

Note

Any line starting with // is ignored by the JavaScript interpreter, the same way anything between <!-- and --> tags is ignored by HTML browsers. The lines starting with // in Figure 20.6 are just comments by the Web page author, reminding anyone who reads the code what each function does.

As you may remember from Hour 19, a function is a piece of JavaScript code that can be called on to do a specific task. The first function in Figure 20.6 checks to see if a Web page is being viewed with a DHTML-compatible Web browser. In order to qualify as DHTML-compatible (according to me on this particular Thursday, anyway), a browser must understand some version of JavaScript advanced enough to group text and graphics into layers and dynamically position those layers anywhere on a Web page. The following are the only browsers that meet these criteria:

You'll see how to use the checkDHTML function on your Web pages momentarily, but first you should know what it does when it detects an incompatible browser. The following line of JavaScript deals with this eventuality:

{ document.location="nodhtml.htm"; return 0 }

This takes the user to the nodthtml.htm page in Figure 20.5, while sending a signal to the original page to let it know that it shouldn't try to perform any DHTML tricks.

The next function in Figure 20.6, makeName, is pure black magic. To understand the need for it, you have to realize exactly how Microsoft and Netscape's implementations of JavaScript differ when it comes to handling layers.

To change the position of a layer (for example, the layer named "intro"), you need some way to say "the top of the layer named intro" and "the left side of the layer named intro" in JavaScript—and that's where the trouble starts. To move the layer down so its top edge is 200 pixels from the top edge of the browser window, you need a different command in Netscape Navigator than in Microsoft Internet Explorer. The Netscape way follows:

document.intro.top = 200

This is the Microsoft way to say the same thing:

document.all.intro.style = 200

This clearly makes it a pain in the proverbial Back button to write a script that works with both browsers.

Now for the black magic. If you give the makeName function in Figure 20.1 the name "intro", it gives you either "document.intro" or "document.all.intro.style", depending on which browser you are using. If you use this result to refer to a layer, it works nicely for Netscapians and Microsofters alike. You will soon see exactly how this works in practice because you're finally ready to see how Dynamic HTML layer animation is accomplished.

Share ThisShare This

Informit Network