Simple JavaScript Mac Fork?

[betaname]

Hi there!
I've got some JavaScript drop-down menus that work great in a Windows environment. They work okay in Mac IE, but not at all in Mac's new Safari web browser. I recently heard that Microsoft is discontinuing development of Mac IE, so this troubles me that the soon to be Mac standard Safari browser can't do much of the functionality I have on my site.

I'm thinking maybe I can just have the menu display on PC's, and if the OS is a Mac, it will show a static image or something.

Does anybody out there know of a simple forking JavaScript to detect OS...or something like that that would have a similar effect? Your help is appreciated!

Thanks!

Seth

[AdamGundry]

It's easier to test for the specific features you want to use. If you use an if statement with the condition as the property/method you want to test, if it is available it will evaluate true and if not will evaluate false.

For example, test if document.getElementById() is enabled using this:
if (document.getElementById){
// You can use document.getElementById()
} else {
// You can't
}

Adam

[mads]

What you should do is open the page in Safari, then press the bug button to tell Apple about the problem, and they'll fix it in the next version. Be sure to add the page source to the bug report.

Remember, it's still only a beta. By the time the full version is out, I'm sure they will have everything figured out.

[Jona]

Originally posted by betaname
Does anybody out there know of a simple forking JavaScript to detect OS...or something like that that would have a similar effect? Your help is appreciated!

The ultimate browser sniffer: http://www.webreference.com/tools/browser/javascript.html ;) Source code should be there, too.

Jona

[betaname]

Thanks Jona. That looks like a good start! Do you have any idea how to break out of that just the stuff to do an OS sniff and command?

Yes, it is a little over my head and I'm having trouble making it work. Will keep at it, though!

[Jona]

Here is the code that detects the OS:


// *** PLATFORM ***
var is_win = ( (agt.indexOf("win")!=-1) || (agt.indexOf("16bit")!=-1) );
// NOTE: On Opera 3.0, the userAgent string includes "Windows 95/NT4" on all
// Win32, so you can't distinguish between Win95 and WinNT.
var is_win95 = ((agt.indexOf("win95")!=-1) || (agt.indexOf("windows 95")!=-1));

// is this a 16 bit compiled version?
var is_win16 = ((agt.indexOf("win16")!=-1) ||
(agt.indexOf("16bit")!=-1) || (agt.indexOf("windows 3.1")!=-1) ||
(agt.indexOf("windows 16-bit")!=-1) );

var is_win31 = ((agt.indexOf("windows 3.1")!=-1) || (agt.indexOf("win16")!=-1) ||
(agt.indexOf("windows 16-bit")!=-1));

var is_winme = ((agt.indexOf("win 9x 4.90")!=-1)); // new 020128 - abk
var is_win2k = ((agt.indexOf("windows nt 5.0")!=-1) || (agt.indexOf("windows 2000")!=-1)); // 020214 - dmr
var is_winxp = ((agt.indexOf("windows nt 5.1")!=-1) || (agt.indexOf("windows xp")!=-1)); // 020214 - dmr

// NOTE: Reliable detection of Win98 may not be possible. It appears that:
// - On Nav 4.x and before you'll get plain "Windows" in userAgent.
// - On Mercury client, the 32-bit version will return "Win98", but
// the 16-bit version running on Win98 will still return "Win95".
var is_win98 = ((agt.indexOf("win98")!=-1) || (agt.indexOf("windows 98")!=-1));
var is_winnt = ((agt.indexOf("winnt")!=-1) || (agt.indexOf("windows nt")!=-1));
var is_win32 = (is_win95 || is_winnt || is_win98 ||
((is_major >= 4) && (navigator.platform == "Win32")) ||
(agt.indexOf("win32")!=-1) || (agt.indexOf("32bit")!=-1));

var is_os2 = ((agt.indexOf("os/2")!=-1) ||
(navigator.appVersion.indexOf("OS/2")!=-1) ||
(agt.indexOf("ibm-webexplorer")!=-1));

var is_mac = (agt.indexOf("mac")!=-1);
if (is_mac) { is_win = !is_mac; } // dmr - 06/20/2002
var is_mac68k = (is_mac && ((agt.indexOf("68k")!=-1) ||
(agt.indexOf("68000")!=-1)));
var is_macppc = (is_mac && ((agt.indexOf("ppc")!=-1) ||
(agt.indexOf("powerpc")!=-1)));

var is_sun = (agt.indexOf("sunos")!=-1);
var is_sun4 = (agt.indexOf("sunos 4")!=-1);
var is_sun5 = (agt.indexOf("sunos 5")!=-1);
var is_suni86= (is_sun && (agt.indexOf("i86")!=-1));
var is_irix = (agt.indexOf("irix") !=-1); // SGI
var is_irix5 = (agt.indexOf("irix 5") !=-1);
var is_irix6 = ((agt.indexOf("irix 6") !=-1) || (agt.indexOf("irix6") !=-1));
var is_hpux = (agt.indexOf("hp-ux")!=-1);
var is_hpux9 = (is_hpux && (agt.indexOf("09.")!=-1));
var is_hpux10= (is_hpux && (agt.indexOf("10.")!=-1));
var is_aix = (agt.indexOf("aix") !=-1); // IBM
var is_aix1 = (agt.indexOf("aix 1") !=-1);
var is_aix2 = (agt.indexOf("aix 2") !=-1);
var is_aix3 = (agt.indexOf("aix 3") !=-1);
var is_aix4 = (agt.indexOf("aix 4") !=-1);
var is_linux = (agt.indexOf("inux")!=-1);
var is_sco = (agt.indexOf("sco")!=-1) || (agt.indexOf("unix_sv")!=-1);
var is_unixware = (agt.indexOf("unix_system_v")!=-1);
var is_mpras = (agt.indexOf("ncr")!=-1);
var is_reliant = (agt.indexOf("reliantunix")!=-1);
var is_dec = ((agt.indexOf("dec")!=-1) || (agt.indexOf("osf1")!=-1) ||
(agt.indexOf("dec_alpha")!=-1) || (agt.indexOf("alphaserver")!=-1) ||
(agt.indexOf("ultrix")!=-1) || (agt.indexOf("alphastation")!=-1));
var is_sinix = (agt.indexOf("sinix")!=-1);
var is_freebsd = (agt.indexOf("freebsd")!=-1);
var is_bsd = (agt.indexOf("bsd")!=-1);
var is_unix = ((agt.indexOf("x11")!=-1) || is_sun || is_irix || is_hpux ||
is_sco ||is_unixware || is_mpras || is_reliant ||
is_dec || is_sinix || is_aix || is_linux || is_bsd || is_freebsd);

var is_vms = ((agt.indexOf("vax")!=-1) || (agt.indexOf("openvms")!=-1));


Jona

[betaname]

Thanks Jona!

Yeah, that's what I pulled out of it, too. But I can't figure out where to insert the data to make the browser use one script if "win" and the other script if "mac."

Would I just put it into the lines with the terms I'm looking at:
Ex:
var is_mac = (agt.indexOf("mac")!=-1);
var is_win = ( (agt.indexOf("win")!=-1) || (agt.indexOf("16bit")!=-1) );

somewhere in those?

[Jona]

Yes, you would use that part and read it like this:


var is_mac = (agt.indexOf("mac")!=-1);
var is_win = ( (agt.indexOf("win")!=-1) || (agt.indexOf("16bit")!=-1) );

if(is_mac){alert("You're using Macintosh!");}
if(is_win){alert("You're using Windows!");}


Jona

[betaname]

Excellent! :D I pasted

if(is_mac){alert("You're using Macintosh!");}
if(is_win){alert("You're using Windows!");}

after that long script, and the alert popped right up for me. Works!

Can I use this JavaScript to run another? Can I tell it to run one script versus another based upon the sniff job that this script did? Example:

if(is_mac){src="js/menumac.js";}
if(is_win){src="js/menuwin.js";}

I know the above is wrong, but it's possible you get the idea. Thanks so much for your help thus far. Do you know how to script that if possible? Any help you can offer is appreciated!

[Jona]

Yes, you can.


if(is_mac){document.write("<script src='macscript.js' type='text/javascript'></script>");}
if(is_win){document.write("<script src='winscript.js' type='text/javascript'></script>");}


Of course, this will go in your HEAD tag.

Jona

[betaname]

Even closer! :D

It works and bring up the correct menu (for PC which I'm on), but writes this piece onto the page as well:

");} if(is_win){document.write("");}

It's referred to as an "Unterminated String Content" which is strange because it works though. You can see here if you want:

http://www.buyplusdirect.com/site/mac.html

[Jona]

Oh, my bad. lol. Try this script.


if(is_mac){document.write("<scr"+"ipt src='macscript.js' type='text/javascript'><\/sc"+"ript>");}
if(is_win){document.write("<scr"+"ipt src='winscript.js' type='text/javascript'><\/sc"+"ript>");}


Jona

[betaname]

Most excellent! Works like a charm. Thanks a bunch. Let me know if you need a good deal on a digital projector (where I work)...I hear Star Wars looks great when projected on the wall ;)

Just out of curiousity, how would you get this code to affect things below the HEAD tag? Say you wanted to show different images within a table cell dependant on the OS? Or something like that...

[Jona]

You should actually be using a server-side script to detect the OS, that way the user doesn't have to have JS enabled. Approximately 13% of your visitors will end up not being able to view it properly because it requires Javascript. Instead you should use a server-side language to display different elements depending on which OS is used.

Anyways, the code I showed you will work in any case you like. For instance, you could do this in the BODY tag:


if(is_mac){document.write("<img src='youhavemac.gif'>");}
if(is_win){document.write("<img src='youhavewin.gif'>");}


Jona

[betaname]

Thanks for all of your help and advice, Jona.

[Jona]

You're welcome. :cool:


Jona