WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

HTML Tips and Tricks

by Scott Clark

The Client Is Always Right!
Part 2

Now you can use the browser information to display browser/version specific tags, such as marquee or table background color tags:
<SCRIPT LANGUAGE = "JavaScript"> if (version == 3) document.write("<CENTER> <TABLE BORDER=2 ><TD BGCOLOR=\"pink\"> <CENTER> <H3>You're using the latest, greatest Web browser, Netscape Navigator 3.0!</H3> </CENTER></TABLE></CENTER>"); else if (version == 2) document.write("<CENTER> <TABLE BORDER=2gt;<TD BGCOLOR=\"pink\"> <CENTER> <H3>You're not using the latest version, but hey, at least you've got Netscape Navigator 2.x.</H3> </CENTER></TABLE></CENTER>"); else if (version == 1) document.write("<CENTER> <TABLE BORDER=2 CELLPADDING=4> <TD BGCOLOR=\"pink\"> <CENTER> <MARQUEE>You're using Microsoft Internet Explorer</MARQUEE> </CENTER></TABLE></CENTER>"); else document.write("<H2 ALIGN=\"center\">You're using a JavaScript capable browser that I'm not aware of!! </H2>"); </SCRIPT> </BODY >
What the JavaScript does is to use the userAgent variable to find out the browser and version that the client is using:
 var version = 0; if (navigator.userAgent.indexOf("Mozilla/3.0") != -1) version = 3; else if (navigator.userAgent.indexOf("MSIE") != -1) version = 1; else if (navigator.userAgent.indexOf("Mozilla/2.0") != -1) version = 2; else version = 0; 
Then it assigns each browser/version a number, and tells the client to send specific HTML to the client for each specific browser:
 if (version == 3) document.write("<CENTER> <TABLE BORDER=2><TD BGCOLOR=\"pink\"> <CENTER> <H3>You're using the latest, greatest Web browser, Netscape Navigator 3.0! </H3> </CENTER></TABLE></CENTER>"); 
etc... (it continues testing until conditions are met).

This way, the same page can be sent to all clients, and the client's browser will show the appropriate page accordingly. If the browser is JavaScript-challenged, then the JavaScript will be ignored, and the normal HTML tags will be seen. If, however, you put in both standard HTML tags, as well as JavaScript, you may end up with them both being displayed in the JavaScript-capable browser (unless you use if-then statements in your JavaScript code--but that's another article).

One way to create a page that can be correctly read by JavaScript-challenged browsers and still display the appropriate cutting-edge tags for newer versions is to make the page the only frame in a framed page. The FRAMESET would look something like this:

 <FRAMESET ROWS="100%,*"> <FRAME SRC="oneframe.html" NAME="only" NORESIZE> </FRAMESET> 
The ROWS (or COLS) are set so that the only frame in the set is displayed 100%. The frame should not be re-sizable, hence the NORESIZE tag. You have to make sure that all links on the framed page use the TARGET = "_self" property so that the whole framed page is replaced when the link is clicked on. You can then place a page with the standard HTML tags (for JavaScript-challenged browsers) inside the NOFRAMES tags.

[ Click here to move to the last part of the article ]

Web Developer® Site Feedback
Web Developer®
Copyright © 2000 internet.com Corporation. All rights reserved.

HTML5 Development Center

Recent Articles