…use these to jump around or read it all
[How’d You Do That?]
[The Script]
[Deconstructing the Script]
[A Better Example]
[Where’s the Code?]
[Getting Specific]
[Setting Your Page as Home Page: IE5.0 only!]
This is really a clever deal. In this tutorial I’m going to talk about a different way to post information to your page depending on what browser the user is running.
It use to be that the favored method of posting elements that dealt with specific browsers was to use a browser choice script. Then that script would send people to a whole separate page created just for their browser. But that meant making a bunch of different pages. Here I’m going to show you a method of putting that browser choice right on your page. A JavaScript will read the user’s browser and, depending on what that person is running, post text and code to the page.
Now it will be possible to have both DHTML and Layer commands on the same page. Depending on whether the user is running IE or Navigator, they’ll get the correct code for their system.
Here…let me take a shot at it. Are you
Yeah? Thought so.
How’d You Do That?
I did it through a JavaScript that first tests your browser’s make and then tests your browser’s version. Depending on the browser version and make I posted the text “running XXXX.x or better?”. I just stuck the text “Are you” in front so the JavaScript text would make a sentence.
But this is using the script in it’s easiest form. You can do so much more than a simple parlor trick. But first let’s find out how I got the text to display correctly.
The Script
I’ll show it to you in a second. First off, let me tell you the thinking behind it.
There are so many different browsers and versions of browsers that to test for them all individually would be silly. You would do nothing but constantly update your scripts every time a new version comes out. So you need to make some broad, general statements. Here’s what I test for in this script:
- Is the browser Netscape, IE or neither?
- Is the browser version at least 4.0?
I made the second condition because it seems to be that browser version 4.0 were the turning point for both Netscape Navigator and Internet Explorer. Version 4.0 is when layers came to Netscape and when DHTML came to IE. That seemed like a solid cut off point as you can safely assume that all versions above 4.0 will continue to support what 4.0 does.
Remember I’m giving you just the basic format here first.
Enough description!
Deconstructing the Script
I’ll hit is step by step. After the first little blurb of code, you’ll pretty much be able to take it the rest of the way, but here we go.
if (navigator.appName == “Microsoft Internet Explorer” && navigator.appVersion >= “4.0”)
{document.write(“Running IE 4 or better?”)}
The script is a series of IF statements that test the browser name and version. Read along in the code above as I follow it through its test.
- if starts the command. The code the follows in the parentheses sets the test.
- navigator.appName is JavaScript for the name of the browser.
- == Those double equal signs mean “is equal to”.
- The two names are “Netscape” and “Microsoft Internet Explorer” notice the capitalization and double quotes. You have to have it just like this.
- && is JavaScript for “and”. Thus we’re test two elements here, the name of the browser and then what follows.
- navigator.appVersion is JavaScript for the browser’s version number. Now, we’ll get into this a little more later in the tutorial, but version numbers get tricky. However, as long you denote version in the “#.#” format in double quotes as I have above, you can make very broad statements like is the browser 4.0 or better.
- >= means greater than or equal to. (<= means less than or equal to. You’ll see that coming up).
- “4.0” is my 4.0 cut off point for version 4.0 browsers.
What follows within the curly brackets is what happens if the condition is met. In this case a “document.write” statement is used to write text to the page. That’s what document.write does. It simply writes what is within the double quotes to the page, no questions asked. Just make sure to have double quotes because without them the script will think that the text refers to a command rather than simple text to be printed. Error.
In each of the following cases, I have text the denotes
the browser version being printed to the page.
The next bit of code tests is the browser is IE and if it is less than version 4.0:
if (navigator.appName == “Microsoft Internet Explorer” && navigator.appVersion < "4.0")
{document.write(“Running IE 3.x or less?”)}
Next we test for Netscape browser and version 4.0 or better:
if (navigator.appName == “Netscape” && navigator.appVersion >= “4.0”)
{document.write(“Running Netscape 4 or better?”)}
Navigator and versions less than 4.0:
if (navigator.appName == “Netscape” && navigator.appVersion < "4.0")
{document.write(“Running Netscape 3.x or under?”)}
Finally, we test to see if the user has neither Netscape nor Internet Explorer. “!=” means “is not equal to”.
if (navigator.appName != “Microsoft Internet Explorer” && navigator.appName != “Netscape”)
{document.write(“not running IE or Netscape?”)}
At least one of the conditions will be true and something will get written to the screen.
Notice that when I first had you look at the script that the first line of code (the “if” lines) were all on one line. Make sure your code is like that. If not…error.
A Better Example
Granted, this does take a little bit of coding to get through.
But once you get the effect, you’ll want to start using this stuff all over your pages to take advantage of what one browser will do that another won’t…all while not leaving earlier version browsers out of the loop.
OK, after that run on sentence, let me tell you what to look for in the next example:
- The script writes a link to HTML Goodies to the page.
- The script sets the same conditions as above.
- If the browser is IE version 4.0 or better, then the link will take advantage of the IE 4.0 by setting the cursor to a question mark and popping up a tool tip box.
- If the browser is Netscape Navigator 4.0 or better, then the laying function of that browser will come into play. When the mouse passes over, a purple box will pop up.
- All other browsers get just a basic hypertext link.
See it in Action (if you can)
Be SURE to look at the source code!!!
Where’s the Code??
What? You didn’t see coding? Yeah!
Then that means it
worked and you’re using Netscape. You’re not suppose to see coding.
You’re only suppose to see the code that the
script writes to the page. It’s almost like ASP with JavaScript. IE users will see
the entire code.
All I did was use very long “document.write” statements to
write layer and/or SPAN tags and code to the page when a browser version 4.0 or better pops up.
I know it looks confusing by it’s all pretty straight forward. Just go slow and you’ll get it.
And once you do get one working, you’ll go nuts with this stuff.
In order to save you a few headaches, here are some tips
I learned the hard way When working with document.write statements:
- Any coding within “document.write” statements cannot contain double quotes, apostrophes,
or commas. Period.
- If you have a single word attribute (like BGCOLOR=white), then there’s no need
to surround the items (white) with any quotes.
- Multiple word attributes (TITLE=Hey there) must be surrounded in single quotes:
TITLE=’Hey there’.
- Document.write statement must all remain on the same line. Long lines are fine, just don’t break them into multiple lines.
- Try to avoid breaking code into multiple document.write statements. Much error!
Getting Specific
You start to open a big can of worms, but sometimes it’s needed. While writing this tutorial (the week of 5/9/99) I ran into a big bunch of trouble
while trying to separate out IE version 5.0. I figured that I could simply set up a statement that read that if the version is greater than or equal to 5.0, then do this.
Makes sense, right?
Wrong.
You already know that navigator.appName represents the
browser’s name, and navigator.appVersion represents the browser’s version. I know what each browser’s name and version are because I first created a small JavaScript to return them to me. It looks like this:
<SCRIPT LANGUAGE=”javascript”>
document.write(navigator.appName)
document.write(“<P>”)
document.write(navigator.appVersion)
</SCRIPT>
Take that, paste it to a page and run the script. You’ll
get the returns. You’ll also notice that the version number is much bigger than what
I’m showing you here. Here’s the actual version number of your browser:
I’m displaying the number simply by running part of the
script I just gave you. See how much information there is? If you want to call for
a specific browser then you’re going to have to call for a specific version with that entire version code.
What a pain! Do you realize how many versions there are?
Ugh! Wicked lots! (I heard a student say that)
The IE 5.0 Problem
I figured this didn’t really matter because each successive
version would show itself by the first numbers, right? Make sense? Thus, IE 5.0 or better would be able to be called by the number 5.0.
Wrong again.
Here’s the version return from IE version 5.0:
Nice, huh? It returns a 4.0 at the beginning.
Setting your page as Home Page: IE5.0 only!
It is my suggestion to you that before you attempt to
re-invent the wheel and create a script so huge that it includes all browsers and all versions, try this first.
For a specific browser and version, set up a script that
will write text to the page if the browser and version are correct, but will write nothing
if the condition is not met. Here’s an example.
IE five will allow you to set up a link that, when clicked
will make your page the browser’s home page. Annoying yes, but you can do it.
Here it is in Action
You have to have IE5.0 or better or you’ll just get text.
The concept is that if the exact condition is not met,
then the text is written to the page. If you want literally nothing written to the page,
then leave the document.write quotes empty. Those with the correct browser get the look,
those without…don’t.
That’s That
I have seen multiple methods of doing this same effect.
Most of the JavaScript I saw went into parsing and other commands.
I wrote these scripts so feel free to use them to your heart’s content. I think they’re functional
and rather easy to understand. I hope you can use them.
Enjoy!
[How’d You Do That?]
[The Script]
[Deconstructing the Script]
[A Better Example]
[Where’s the Code?]
[Getting Specific]
[Setting Your Page as Home Page: IE5.0 only!]
