browser detect / document.write

[tenoruke]

I'm pretty much a javascript novice, and hope someone can help me with this attempt to write one link to a CSS file if the user is on Netscape 4, 4.7x etc. (where stuff tends to explode), and one for IE 5 and above. I'm trying to keep it as simple as possible. Here's what I have so far:

<SCRIPT LANGUAGE="JavaScript">
<!--
if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) < 4 )) {
document.write("<LINK REL=stylesheet HREF=\"../file2.css\" TYPE=\"text/css\">"); }
else {
document.write("<LINK REL=stylesheet HREF=\"../file.css\" TYPE=\"text/css\">"); }
// -->
</SCRIPT>

Doesn't seem to be working, though. Netscape 4.7 appears to still be calling up file.css instead of file2.css. The script is successfully writing file.css for IE 5, though. Can anyone help? Much appreciated if so.

[khalidali63]

Originally posted by tenoruke

if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) < 4 )) {
document.write("<LINK REL=stylesheet HREF=\"../file2.css\" TYPE=\"text/css\">"); }


My guess is that you never fullfile the condition above because its looking for a version below 4,if you are always looking for a version 4 then it should say ==4

cheers

Khalid

[AdamBrill]

I think the if statement should look like this:

if(navigator.appName=="Netscape" && parseInt(navigator.appVersion)<5)

You had some of your parenthesis wrong and now it will run the first one for version 4 and lower. You should put a <noscript> tag in there, too, just in case they don't have javascript...

[tenoruke]

Thanks!! Based on both your sets of feedback, I have something that works. It looks like this:

<!--
if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion)<6) {
document.write("<LINK REL=stylesheet HREF=\"../file.css\" TYPE=\"text/css\">"); }
else {
document.write("<LINK REL=stylesheet HREF=\"../file2.css\" TYPE=\"text/css\">"); }
// -->

Instead of sniffing the 'wrong' browser (Netscape), I figured why not sniff the 'right' browser (MSIE),
since file2.css is the simpler one that works best on all Netscape versions. The specs are for IE 5 and Netscape 4 on up, mainly on PC / Windows 98 and up. Does this make the same amount of sense to you?

[Charles]

There is, however, a much easier and non-JavaScript way to do this. (Keep in mind that an awful lot of MSIE users disable scripting.) Netscape 4 doesn't recognize the CSS @import rule. See http://www.w3.org/TR/REC-CSS2/cascade.html#at-import.

[tenoruke]

Charles -

If I had my way, I wouldn't be using CSS for any part of this design. I lean toward stability over download speed, BUT the client here is enamored of 'saving k' by doing nav and mouseovers asked me to use CSS for the navigational elements. Bleah.

Thanks for the link, though. I'll give it a whirl!

Tenoruke

[Jona]

I always use variables to make the code more readable myself...

var browser = navigator.appName
var bVer = parseInt(navigator.appVersion)
if((browser == "Microsoft Internet Explorer") && (bVer <= 6) {
document.write("<LINK REL=\"STYLESHEET\" SRC=\"../file.css\" TYPE=\"text/css\">")
} else {
//do whatever else you wanted...
}

That's the way I usually do it, but I always keep the if/else functions down to two lines of code usually.

[tenoruke]

Good point. One of the things thats kept me swiping and repurposing code from people I've worked with over the years (with permission, o'course), rather than writing my own, is the appearance compared to HTML, Styles, etc. Clarity builds confidence, right?

Interestingly, it is a basic competency with action scripting in Flash that gave me the confidence to start writing javascript on my own just recently.

[Jona]

--I do think, however, that it is really cool to see how few lines of code you can get, but arrive at the same result. So I always pull the code as small as I can, like this....

function doSomething() {
if(something){alert(something)} else{alert(somethingelse)}
}

And I usually do everything that way.. I'm just used to reading my personal coding better than others'. I never use all of those tabs, spaces, or return carriages (enters/breaks).

So the above "code" would normally be put...

function doSomething()
{
if(something
{
alert(something)
}
else
{
alert(somethingelse)
}
}

Which is way long, in my opinion...

[tenoruke]

Cool. I wasn't even aware you could get away with
that much flexibility. Was that true on older browsers (IE 4, Netscape 4x, Netscape 3)?

[Jona]

I'm not sure, but it works in IE4 I believe.

[AdamBrill]

Just to clarify, the condensed version will work in all of the browsers that the long version will work in. Also, here is another way of writing the same thing:

function doSomething() {
(something)? alert('something'):alert('somethingelse');
}

That does the same thing as the if statement. I just figured I'd throw it out there... :)

[Jona]

Oh yea, duh. Forgot about that ? : thing. Hehe, but you're right. I just don't often use those... just because--well, I don't! :)