469,954 Members | 1,722 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,954 developers. It's quick & easy.

How do I reference <HTML> element via Javascript?

This is bugging me: how do I reference the topmost node (HTML) within a document? I'd like to set a class on it, which specifies various browser/os/versions so that several browser/os/version-specific css bugs may be addressed without coding. eg: <HTML class="_IE _IE7 _Win _IE7Win">

The closest I've come is document.body.parentNode (line 22, below), but this of course requires that my script be executed from within body... I'd prefer to execute from within HEAD, while the document is still loading.

The code is below. In a nutshell, it does a quick browser detect, writes the findings out to several classes, then erases itself from memory as it is no longer needed. Also, I think this is the only detection script out there that correctly associates Safari Build Versions with the corrresponding Safari Release Version, since there's no way to get the actualy release version from within Safari (way to go, Apple!).



Expand|Select|Wrap|Line Numbers
  1. (function(){
  2.     var maj = Math.floor;
  3.     var BrowserDetect = {
  4.         init: function () {
  5.             this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
  6.             this.version = this.searchVersion(navigator.userAgent)
  7.                 || this.searchVersion(navigator.appVersion)
  8.                 || "an unknown version";
  9.             this.OS = this.searchString(this.dataOS) || "an unknown OS";
  10.  
  11.             if(this.browser == "Safari") {
  12.                 this.build = this.version
  13.                 this.version = this.searchSafariBuilds(this.version, this.dataSafariBuild)
  14.             }
  15.             // add special class for css
  16.             var clientClass= "_"+this.browser;
  17.             var clientVersionClass= "_"+this.browser+maj(this.version)
  18.             var clientVersionOSClass= "_"+this.browser+maj(this.version)+this.OS
  19.             var osClass= "_"+this.OS;            
  20.  
  21.             myClasses = clientClass + " " + clientVersionClass + " " + osClass + " " + clientVersionOSClass;        
  22.             document.body.parentNode.className= myClasses; 
  23.         },
  24.         searchString: function (data) {
  25.             for (var i=0;i<data.length;i++)    {
  26.                 var dataString = data[i].string;
  27.                 var dataProp = data[i].prop;
  28.                 this.versionSearchString = data[i].versionSearch || data[i].identity;
  29.                 if (dataString) {
  30.                     if (dataString.indexOf(data[i].subString) != -1)
  31.                         return data[i].identity;
  32.                 }
  33.                 else if (dataProp)
  34.                     return data[i].identity;
  35.             }
  36.         },
  37.         searchVersion: function (dataString) {
  38.             var index = dataString.indexOf(this.versionSearchString);
  39.             if (index == -1) return;
  40.             return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
  41.         },
  42.  
  43.         searchSafariBuilds : function (vers, data) {
  44.             /* Safari uses internal "build number" instead of a release number, 
  45.             so this translates for us non-apple-employees.*/
  46.             vers = Number(vers.toString().split(".",2).join("."))
  47.             var releaseVersion = "Unknown";
  48.             for (var i=0;i<data.length;i++)    {
  49.                 if(vers > data[i].Safari){ 
  50.                     releaseVersion = data[i].Version; 
  51.                 }
  52.             }
  53.             return releaseVersion;
  54.         },
  55.  
  56.         dataBrowser: [
  57.             {     string: navigator.userAgent,
  58.                 subString: "OmniWeb",
  59.                 versionSearch: "OmniWeb/",
  60.                 identity: "OmniWeb"
  61.             },
  62.             {
  63.                 string: navigator.vendor,
  64.                 subString: "Apple",
  65.                 identity: "Safari"
  66.             },
  67.             {
  68.                 prop: window.opera,
  69.                 identity: "Opera"
  70.             },
  71.             {
  72.                 string: navigator.vendor,
  73.                 subString: "iCab",
  74.                 identity: "iCab"
  75.             },
  76.             {
  77.                 string: navigator.vendor,
  78.                 subString: "KDE",
  79.                 identity: "Konqueror"
  80.             },
  81.             {
  82.                 string: navigator.userAgent,
  83.                 subString: "Firefox",
  84.                 identity: "FF"
  85.             },
  86.             {
  87.                 string: navigator.vendor,
  88.                 subString: "Camino",
  89.                 identity: "Camino"
  90.             },
  91.             {        // for newer Netscapes (6+)
  92.                 string: navigator.userAgent,
  93.                 subString: "Netscape",
  94.                 identity: "NS"
  95.             },
  96.             {
  97.                 string: navigator.userAgent,
  98.                 subString: "MSIE",
  99.                 identity: "IE",
  100.                 versionSearch: "MSIE"
  101.             },
  102.             {
  103.                 string: navigator.userAgent,
  104.                 subString: "Gecko",
  105.                 identity: "Moz",
  106.                 versionSearch: "rv"
  107.             },
  108.             {         // for older Netscapes (4-)
  109.                 string: navigator.userAgent,
  110.                 subString: "Mozilla",
  111.                 identity: "NS",
  112.                 versionSearch: "Mozilla"
  113.             }
  114.         ],
  115.         dataOS : [
  116.             {
  117.                 string: navigator.platform,
  118.                 subString: "Win",
  119.                 identity: "Win"
  120.             },
  121.             {
  122.                 string: navigator.platform,
  123.                 subString: "Mac",
  124.                 identity: "Mac"
  125.             },
  126.             {
  127.                 string: navigator.platform,
  128.                 subString: "Linux",
  129.                 identity: "Linux"
  130.             }
  131.         ],
  132.  
  133.         dataSafariBuild :  [
  134.  
  135.             {Version: ">1.0",    Webkit: 0.0,   Safari: 0.0},
  136.             {Version: "1.0",    Webkit: 85.0,   Safari: 85.0},
  137.             {Version: "1.0.2",  Webkit: 85.7,   Safari: 85.7},
  138.             {Version: "1.0.3",  Webkit: 85.8,   Safari: 85.8},
  139.             {Version: "1.1",    Webkit: 100,    Safari: 100},
  140.             {Version: "1.1.1",  Webkit: 100,    Safari: 100.1},
  141.             {Version: "1.2.2",  Webkit: 125.2,  Safari: 125.7},
  142.             {Version: "1.2.2",  Webkit: 125.2,  Safari: 125.8},
  143.             {Version: "1.2.3",  Webkit: 125.4,  Safari: 125.9},
  144.             {Version: "1.2.3",  Webkit: 125.5,  Safari: 125.9},
  145.             {Version: "1.2.4",  Webkit: 125.5,  Safari: 125.11},
  146.             {Version: "1.3",    Webkit: 312.1,  Safari: 312},
  147.             {Version: "1.3.1",  Webkit: 312.5,  Safari: 312.3},
  148.             {Version: "1.3.2",  Webkit: 312.8,  Safari: 312.5},
  149.             {Version: "1.3.2",  Webkit: 312.8,  Safari: 312.6},
  150.             {Version: "2.0",    Webkit: 400,    Safari: 400},
  151.             {Version: "2.0.1",  Webkit: 412.7,  Safari: 412.5},
  152.             {Version: "2.0.2",  Webkit: 416.11, Safari: 416.12},
  153.             {Version: "2.0.2",  Webkit: 416.12, Safari: 416.13},
  154.             {Version: "2.0.3",  Webkit: 417.9,  Safari: 417.8},
  155.             {Version: "2.0.3",  Webkit: 417.9,  Safari: 417.9},
  156.             {Version: "2.0.3",  Webkit: 418,    Safari: 417.9},
  157.             {Version: "2.0.4",  Webkit: 418.8,  Safari: 419.3},
  158.             {Version: "2.0.4",  Webkit: 418.9,  Safari: 419.3},
  159.             {Version: "2.0.4",  Webkit: 419,    Safari: 419.3},
  160.             {Version: "2.0.4",  Webkit: 419.3,  Safari: 419.3},
  161.             {Version: "3.0",    Webkit: 500,    Safari: 500},
  162.             {Version: "3.0.3",  Webkit: 522,    Safari: 522},
  163.             {Version: "3.0.4",  Webkit: 523.10, Safari: 523.1},
  164.             {Version: "4.0",    Webkit: 600.0,  Safari: 600.0}
  165.         ]
  166.     }
  167.     BrowserDetect.init()
  168.  
  169. })();
  170.  
  171.  
  172.  

(Original code is based off of http://www.quirksmode.org/js/detect.html, with my additions being the self-termination and Safari version detection.)
Nov 2 '07 #1
3 3273
mrhoo
428 256MB
document.documentElement refers to the html root element.


Your browser sniffer could lose some weight.

Expand|Select|Wrap|Line Numbers
  1. navigator.whozit=function () {
  2.     var N= navigator.appName;
  3.     var ua= navigator.userAgent, M;
  4.     if (/opera/i.test(ua)) {
  5.         M= ua.match(/(opera)\/? *(\.?\d+(\.\d+)*)/i);
  6.     }
  7.     else {
  8.         M= ua.match(/(applewebkit|firefox|seamonkey|netscape)\/ *(\.?\d+(\.\d+)*)/i);
  9.         if (M) {
  10.             if (/safari/i.test(ua))  M[1]= "Safari";
  11.             var tem= ua.match(/version\/(\.?\d+(\.\d+)?)/i);
  12.             if (tem)  M[2]= tem[1];
  13.         }
  14.         else  M= ua.match(/ms(ie) *(\d+(\.\d+)*)/i);
  15.     }
  16.     M= M ? [M[1], M[2]] : [N, navigator.appVersion];
  17.     M[0]= M[0].length > 2 ? M[0].capit(true) : M[0].toUpperCase();
  18.     return M;
  19. }
//test case
alert(navigator.whozit())
Nov 2 '07 #2
acoder
16,027 Expert Mod 8TB
In a nutshell, it does a quick browser detect, writes the findings out to several classes, then erases itself from memory as it is no longer needed.
...[snip]
(Original code is based off of http://www.quirksmode.org/js/detect.html, with my additions being the self-termination and Safari version detection.)
I'm just wondering what purpose this serves? Is it just a test project?
Nov 2 '07 #3
It started out as an experiment but now we're looking into using it to help address numerous VERY specific browser bugs; for instance turning off certain features in safari mac 2.0.0.6 but leaving them on in 2.0 and 3.0.

I realize the code is a little bloated but part of the requirement is that a team of people with only minimal coding skills will be taking over the project eventually; therefore it's clearer to keep everything in data tables rather than using RegExps, and to use CSS flags in the body of the beast rather than rely on inline calculations.
Nov 13 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by josh dismukes | last post: by
5 posts views Thread by Ben | last post: by
2 posts views Thread by taras.di | last post: by
4 posts views Thread by Mark G. | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.