There are three files with very original names: browser-detect1.js, browser-detect2.js, and browser-detect3.js. The code in each performs the same tasks using logic that is generally the same. They differ in respects to the commands and idioms use. Each has advantages and disadvantages mostly involved in JavaScript features supported by the browser. Each file creates two objects. The object and property names create by the files are the same so the files can be switched without making changes in the dependent code.

Each file is complete ready to use (just add water). Add the one (and only one) of your choice to your page with the following line in the head section of the page.

<script type="text/javascript" src="path/browser-detect.js"></script>

When the page loads, two JavaScript objects, os and browser, are created. They are available to the code throughout your page. There are several flags (booleans for OS type or browser brand), which you'll see in the code, whose meaning will be apparent. Using the file is simple and makes for readable code.

Results for this browser and each JavaScript file.
PropertyBrowser-detect.jsBrowser-detect2.jsBrowser-detect3.js
Loading

Operating Systems: On creation, object os(n)* checks for these operating systems: Windows, Mac, Linux, Unix, and Sun. The only Windows flavor that is separated is CE. The object's properties contain the results. Here is an example of usage:

*n is 1,2 or 3 respective of the JavaScript file being used.

    if (os1.isLinux) {
        alert("Intelligent people use " + os1.platform);
    }

Browser: The properties of the second object created named browser(n)* contain the results of tests to determine the browser brand, version, and subversion.

*n is 1,2 or 3 respective of the JavaScript file being used.

These are the browser brands checked: Opera, MSIE, Mozilla, Firefox, Netscape, Safari, OmniWeb, ICab, Chimera, Camino, Galeon, and Konqueror. And there are also two browser classes: Gecko and KHTML.

The two browser classes represent browsers that are based on the same rendering engine and experience shows they have the same features and bugs. Gecko browsers are Netscape version 6 and above, Mozilla and Firefox. The KHTML browsers are Konqueror and Safari. Other browsers claim to be Gecko or KHTML based, but are not quite as identical in the way they work to justify lumping them together. You would use these class flags in place of listing all the browsers in the class.

Let's look at the browser brand flags.

    To check the browser:
    if (browser2.isFirefox) {
        alert("Here is code just for Firefox");
    }
    if (!browser2.isMSIE) {
        //Since IE doesn't support fixed
        document.getElementById("id").style.display = "fixed";
    }
    if (browser2.isGecko) {
        alert("Code for Netscape, Mozilla, and Firefox");
    }

Version: The version is converted to a number to make relative comparisons possible; i.e. greater than or less than as well as equal to. This allows the inclusion or exclusion of versions after or before the version that was changed. Browsers released after the code was written will pass a greater than test whereas they would not be considered in an equality or boolean variable test even though the newer browser has the same fix as its predecessor.

Since most version numbers are not actually numbers (they're strings of digits in this case not a subtle difference) the code manipulates them to make numbers that make sense. For example, most versions have two decimals like 1.7.7 and many will have two middle digits as in 1.11.7 where 1.11.7 is greater than 1.9.7. Also there may be trailing alpha characters.

The code combines the first number and the second number into one decimal number after padding the second number to two digits by adding zero to the left. E.g., 1.7.7 becomes 1.07 and 1.11.7 is 1.11. The third number is stored in a property named subversion. The third number is rarely needed but is available.

Since it is extremely rare that any alpha characters that may be part of the version impact coding they are ignored. The letter and anything following it is discarded when creating a numeric version (there is a character version shown later that keeps all characters).

Here are some examples of version testing.

    To test the  version
    if (browser3.isMSIE && browser3.version < 6) {
        alert("Code for versions before 6");
    }
    if (browser3.isFirefox &&
        (browser3.version > 0.08 || browser3.version == 0.08 &&
                                   browser3.subversion > 1) ) {
        /* code for greater than 0.8.1 */
    }

Miscellaneous: The boolean and numeric properties are convenient for writing conditional statements, but they lose some data. The following string properties are provided to retain access to details: os.platform is the name of the operating system, browser.cversion is the original version number retaining alphas, and browser.brand is the name of the browser. Here is how they might be used.

    One more example;
if (os1.isMac && browser1.isMozilla && browser1.version == 1.07) {
    alert("You are using " + browser1.brand +
            " version " + browser1.cversion +
            " on " + os1.platform");
    //displays "You are using Mozilla version 1.7.7 on Macintosh"
}

If you run across any problems with the code, please send an email letting me know the problem, browser and operating system. There is no guarantee I'll be able to help, but where possible I'll give it a good effort. An corrections will then be made available to others.