www.webdeveloper.com
Results 1 to 12 of 12

Thread: Auto-detect Browsers?

  1. #1
    Join Date
    May 2005
    Posts
    60

    Auto-detect Browsers?

    i think i read somewhere that i can use javascript to determine what browser the user is using and have the script assign an appropriate stylesheet. is this possible? can anyone tell me how to do this or where to find info on this subject? sorry if this is the wrong forum for this but i was torn about who might know more about this.

  2. #2

    Auto-detect Browsers?

    PHP Code:
    /* navCheck.js file*/
    /*
        navigator check and version check.
        JDG Softco. 2005
    */

    /* local variables */
    var debug        =    false;    // set true for debug purposes.
    var debug1        =    false;    // false is js 1.1 and lower, set true for js 1.2 and higher debug1 purposes.
    var timeout        =    null;    // leave this null
    var minJSver    =    1.2;    // minimum javascript version that will work on this site.

    /* simple test of IE or NETSCAPE */
    var NS4            =    (document.layers)            ? 0;
    var 
    IE4            =    (document.all)                ? 0;
    var 
    ver4        =    (NS4 || IE4)                ? 0;   

    /* determine if viewing locally as a file, or on the net using http */
    var _Loc        =    ""+document.location;
        
    _Loc        =    _Loc.toLowerCase();
    var 
    webDoc        =    (_Loc.indexOf("http://") != -1);
    var 
    localDoc    =    !webDoc;

    /* constant substitutions */
    var cAgt        =    0
    var 
    cApv        =    1;
    var 
    cApn        =    2;

    /* user agent, app version, and app name strings */
    var agt            =    navigator.userAgent.toLowerCase(); // we change the user agent string to lower case.
    var apv            =    navigator.appVersion;
    var 
    apn            =    navigator.appName;

    /* this function determines if a string is in one of the above strings */
    function isThis(mode,search){
        var 
    tmp = -1;
        if(
    debug1jsv1.1;
        if (
    jsv >= 1.2){
            switch (
    mode){
                  case 
    cAgt    tmp agt.indexOf(search); break; // search the user agent string
                  
    case cApv    tmp apv.indexOf(search); break; // search the app version string
                  
    case cApn    tmp apn.indexOf(search); break; // search the app name string
                
    default        : tmp agt.indexOf(search); break; // DEFAULT search the user agent string
            
    }
            
    //if(debug) alert('Switch mode of JS 1.2 and higher'); 
        
    } else {
            if(
    mode==cAgt)        {tmp agt.indexOf(search);}
            else if(
    mode==cApv)    {tmp apv.indexOf(search);}
            else if(
    mode==cApn)    {tmp apn.indexOf(search);}
            else                {
    tmp apv.indexOf(search);}
            
    //if(debug) alert('If/Else mode of JS 1.1 and lower');
        
    }
        return (
    tmp != -1);
    }

    /* basic navigator check */
    var is_mozilla    =    isThis(cAgt,"mozilla");
    var 
    is_spoofer    =    isThis(cAgt,"spoofer");
    var 
    is_compat    =    isThis(cAgt,"compatible");

    /* more navigator checks */
    var is_opera    =    isThis(cAgt,"opera");
    var 
    is_webtv    =    isThis(cAgt,"webtv");
    var 
    is_aol        =    isThis(cAgt,"aol");
    var 
    is_Mac        =    isThis(cApv,"Mac");
    var 
    is_firefox    =    isThis(cAgt,"firefox");
    var 
    is_ie       =    isThis(cAgt,"msie");
    var 
    is_nav      =    (
                            (
    is_mozilla)    && 
                            (!
    is_spoofer)    &&
                            (!
    is_compat)    && 
                            (!
    is_opera)        && 
                            (!
    is_webtv)
                        );

    /* basic version checks */
    var is_major    =    parseInt(apv); 
    var 
    is_minor    =    Math.round((parseFloat(apv) - is_major) * 100.0);

    /* more netscape version checks */
    var is_nav2        =    (is_nav    &&    (is_major == 2));
    var 
    is_nav3        =    (is_nav    &&    (is_major == 3));
    var 
    is_nav4        =    (is_nav    &&    (is_major == 4));
    var 
    is_nav4up    =    (is_nav    &&    (is_major >= 4));
    var 
    is_navonly    =    (is_nav    &&    (isThis(cAgt,";nav") || isThis(cAgt,"; nav")) );
    var 
    is_nav5        =    (is_nav    &&    (is_major == 5));
    var 
    is_nav5up    =    (is_nav    &&    (is_major >= 5));

    /* more IE version checks*/
    var is_ie3        =    (is_ie    &&    (is_major 4));
    var 
    is_ie4        =    (is_ie    &&    (is_major == 4) && (isThis(cAgt,"msie 4.0")) ); 
    var 
    is_ie4up    =    (is_ie    &&    (is_major >= 4));
    var 
    is_ie5        =    (is_ie    &&    (is_major == 4) && (isThis(cAgt,"msie 5.0")) );
    var 
    is_ie55        =    (is_ie    &&    (is_major == 4) && (isThis(cAgt,"msie 5.5")) );
    var 
    is_ie5up    =    (is_ie    &&    !is_ie3 && !is_ie4 && !is_ie5);
    var 
    is_ie55up    =    (is_ie    &&    (!is_ie3 && !is_ie4 && !is_ie5 && !is_ie55) );
    var 
    is_ie6        =    (is_ie    &&    (is_major == 4) && (isThis(cAgt,"msie 6.0")) );
    var 
    is_ie6up    =    (is_ie    &&    (!is_ie3 && !is_ie4 && !is_ie5 && !is_ie55 && !is_ie6) );
    var 
    is_iegte4    =    (is_ie4    || is_ie4up || is_ie5 || is_ie55 || is_ie5up || is_ie6up);

    /* function that replaces the OLDSTR with NEWSTR, in the base string MYSTRING */
    function replaceStr(mystring,OLDSTR,NEWSTR){
        var 
    etmp    mystring;  
        var 
    ntmp    "";  
        var 
    tmp;
        if(
    etmp.indexOf(OLDSTR) > -1){
            
    tmp etmp.split(OLDSTR);
            for(var 
    0k<tmp.lengthk++){    
                if(
    k<tmp.length-1){
                    
    ntmp += (tmp[k] + NEWSTR);    
                }else{
                    
    ntmp += (tmp[k]);    
                }    
            }
        }else{
            
    ntmp mystring;
        }
        return 
    ntmp;
    }


    /* 
        Sample user agent strings... 
        "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
        "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4"

        get_ver attempts to read this string and return a version number...
    */
    function get_ver(nname){
    /* 
        <nname> is a lowercase identifier in the user agent string that has a version number following it...
        such as "msie 6.0;"
        The number, 6.0 is pertinent to MSIE, but not ALL versions are 6.0, 
        but should include MSIE in the user agent string...

        SO, that is what nname attempts to locate, up to the ";" 

        In the case of say Firefox, which has a "/" in the string, and it's version is at the end of the
        user agent string, it must be dealt with differently...
    */
        
    var ff_ver    =    '0';                            //assume NO VERSION number available...
        
    var ffagt     =    agt.substr(agt.indexOf(nname)); //get the agent name and version from the agent string...
        
    var sc        =    ffagt.indexOf(';');                //get the next ";" as a position number. ( if there is one...IE: Firefox doesn't )
        
    if(sc 0ffagt ffagt.substr(ffagt.indexOf(nname),sc); //clip the string at the ";"
        
    ffagt        =    replaceStr(ffagt,nname,"");        //eliminate the agent name in the string...
        
    ffagt        =    replaceStr(ffagt,"/","");        //eliminate any "/" in the string... (Firefox)
        
    if (ffagt.length ) {                        // if the string length is greater than zero...
            
    var fs ffagt.split('.');                    //split the string at the decimal point
            
    var fmn '';                                //declare an empty string.
            
    for(var i0;i<fs.length;++i){                //for each fs[i]...
                
    fmn += "" fs[i] + "";                 //concatenate any "number" to a tmp string.
                
    if(i==0fmn += ".";                    //and if it's the "major" version, append a "." to the tmp string
            
    }
            var 
    majorVNum    =    parseInt(fmn);             //extract the major version number
            
    var minorVNum    =    Math.round((parseFloat(fmn) - majorVNum) * 1000 ) / 1000//extract the minor version number
            
    ffver            =    majorVNum minorVNum;    // our version number is major + minor (as a number)
            
    ff_ver            =    ffver.toString();        // convert the number to a string
            
    if(ff_ver.indexOf('.') == -1){ff_ver += '.0';} // if it does NOT have a decimal, then add one, and a zero as minor version
            
    return ff_ver;                                // return this string as the browser version number
        
    } else return 'Unknown version';
    }

    /* AOL version checks */
    var is_aol3        =    (is_aol && is_ie3);
    var 
    is_aol4        =    (is_aol && is_ie4);
    var 
    is_ao15        =    (is_aol && is_ie5);
    var 
    is_ao155    =    (is_aol && is_ie55);
    var 
    is_ao16        =    (is_aol && is_ie6);
    var 
    is_aol5up    =    (is_aol && is_ie5up);
    var 
    is_aol6up    =    (is_aol && is_ie6up);
    var 
    is_aolgte4    =    (is_aol && is_iegte4);

    /* set some internal values for determining the version number...*/
    var n_value        =    (is_opera)                    ? 0            
                        (
    is_webtv)                    ? 1            
                        (
    is_aol)                    ? 2            
                        (
    is_Mac)                    ? 3            
                        (
    is_firefox)                ? 4            
                        (
    is_ie)                        ? 5            
                        (
    is_nav)                    ? 6            
                                                     -
    1            ;

    /* derive the nav name we are using */
    var n_type         =    (n_value==0)    ? 'Opera'                :
                        (
    n_value==1)    ? 'WebTV'                :
                        (
    n_value==2)    ? 'AOL'                    :
                        (
    n_value==3)    ? 'Macintosh'            :
                        (
    n_value==4)    ? 'Firefox'                :
                        (
    n_value==5)    ? 'Internet Explorer'    :
                        (
    n_value==6)    ? 'Netscape Navigator'    :
                        (
    n_value<=-1)    ? 'Unknown'                :
                                          
    'Unknown'                ;

    /* attempt to detect the version number of our nav */
    var n_ver        =    
                        (
    n_value==4)    ? get_ver("firefox")    :
                        (
    n_value==5)    ? get_ver("msie")        :

                        (
    is_aol3)        ? '3'                    :
                        (
    is_aol4)        ? '4'                    :
                        (
    is_aol5)        ? '5.0'                    :
                        (
    is_aol55)        ? '5.5'                    :
                        (
    is_aol6)        ? '6.0'                    :
                        (
    is_aol6up)        ? '> 6.0'                :

                        (
    is_nav2)        ? '2'                    :
                        (
    is_nav3)        ? '3'                    :
                        (
    is_nav4)        ? '4'                    :
                        (
    is_nav5)        ? '5'                    :
                        (
    is_nav5up)        ? '> 5'                    :
                                            
    '...'                    ;

    /*     Javascript:
        alternative attempt to detect the javascript version 
        The "main" detection is located in headerScript.htm
    */
    var is_js        =    (is_nav5up)                    ? 1.5        :
                        (
    is_nav5)                    ? 1.4        :
                        (
    is_nav)                    ? 1.4        :
                        (
    is_nav4 || 
                         (
    is_minor 4.05) || 
                         
    is_ie5)                    ? 1.3        :
                        (
    is_ie && is_major 3)        ? 1.3        :
                        (
    is_nav4 || 
                         (
    is_minor <= 4.05) || 
                         
    is_ie4)                    ? 1.2        :
                        (
    is_nav3 || is_opera)        ? 1.1        :
                        (
    is_nav2 || is_ie3)             ? 1.0        
                                                      
    0.0        ;

    //if(debug){alert("JSV variable: "+jsv +"\nIS_JS variable: "+is_js);}
    /* 
        jsv is a more reliable version of javascript version, 
        and is declared in headerScript.htm 
    */
    if    (typeof jsv != "undefined")     { is_js jsv;         }
    else                                { var 
    jsv is_js;    }

    if(
    debug){alert("JSV variable: "+jsv +"\nIS_JS variable: "+is_js);}

    function 
    setObj_wh(obj_,w,h){
        
    with(document){
            if(
    typeof obj_ == "string"){
                if(
    0getElementById(obj_).style.width    w;
                if(
    0getElementById(obj_).style.height    h;
            }else{    
                if(
    0obj_.style.width    w;
                if(
    0obj_.style.height    h;
            }    
        }

    Last edited by griff777; 06-18-2005 at 07:10 PM.

  3. #3

    And the headerscript.htm file...

    HTML Code:
    <!-- use PHP or SSI to include this in the header of an html file -->    
    	<!-- Begin headerScript.htm -->
    	<!-- 
    		NOTE: DO NOT INSERT type="text/javascript" in the following detection scripts...
    			  It WILL cause them to incorrectly detect a version that is NOT valid.
    	-->
    	<script language="JavaScript" >		jsv = 1.0;	</script>
    	<script language="JavaScript1.1" >	jsv = 1.1;	</script>
    	<script language="JavaScript1.2" >	jsv = 1.2;	</script>
    	<script language="JavaScript1.3" >	jsv = 1.3;	</script>
    	<script language="JavaScript1.4" >	jsv = 1.4;	</script>
    	<script language="JavaScript1.5" >	jsv = 1.5; 	</script>
    	<!-- 
    		the following versions do not exist as yet... 6/11/2005 
    		I have put this "check" in to verify that the short
    		detection scripts actually work...
    	-->
    	<script language="JavaScript1.6" >	jsv = 1.6;	</script>
    	<script language="JavaScript1.7" >	jsv = 1.7;	</script>
    	<script language="JavaScript1.8" >	jsv = 1.8;	</script>
    	<script language="JavaScript1.9" >	jsv = 1.9;	</script>
    	<script language="JavaScript2.0" >	jsv = 2.0;	</script>
    
    	<!-- the above script detections and "navCheck.js" work hand in hand... -->
      	<script src="navCheck.js" type="text/javascript">
    		/*	load the nav check javascript, a continuation of our script here... */
    	</script>
    
     	<script type="text/javascript">
    		/* OK, our main javascript should be working, let's setup our CSS lines */
    		css1 = "electrom.css";
    		css2 = "electrom_ns.css";
    		css = (IE4) ? css1 : css2;
    		document.writeln('<link rel="STYLESHEET" type="text/css" href='+css+'>');
    
    		badJS = "js_iv.htm";
    		if(jsv < minJSver) window.location = badJS; // don't allow incorrect versions of javascript...
    	</script>
    
    	<script src="clock.js" type="text/javascript">
    	</script>
    
    	<!-- Notify the web surfer that their browser isn't using javascript-->
    	<noscript>
    	<pre>
    		Javascript is NOT active.<br>
    		Please note, to view this site JAVASCRIPT must be active.<br>
    	</pre>	
    	</noscript>
    
    	<!-- End headerScript.htm -->
    Last edited by griff777; 06-18-2005 at 07:08 PM.

  4. #4
    Join Date
    May 2005
    Posts
    63
    Or another script, which is a lot smaller. You just paste this in the header of each html page. You could also separate the actual javascript code into an external page and call it in the header of each html page (in which case you would leave the <noscript>alsjdfajdsflkjdf</noscript> part in the header of each page too).
    in the even that a user doesn't have javascript enabled, the <noscript>jaldjfdfj</noscript> loads a default stylesheet. you'd probably want to make this the correct stylesheet for IE since most users will be on IE.

    <script type="text/javascript">
    <!--// Stylesheet Switcher
    if ((navigator.appName).indexOf("Microsoft")!=-1) {
    document.write('<link rel="stylesheet" href="styleIE.css" type="text/css">');
    }
    else {
    document.write('<link rel="stylesheet" href="style.css" type="text/css">');
    }
    //-->
    </script>
    <noscript>
    <link rel="stylesheet" href="style.css" type="text/css">
    </noscript>

  5. #5
    Join Date
    May 2005
    Posts
    60
    are there any significant differences in the different scripts listed? i would assume that i would want to use the shortest one. also, if i write an external script, what is the proper way to call it in the header. i would prefer to use that technique since there will be multiple pages on the site where this test will be necessary.
    Last edited by jerseydubs; 06-18-2005 at 04:18 PM.

  6. #6
    Join Date
    May 2005
    Posts
    63
    the proper way to do my script externally would be to put this in the header:

    <script type="javascript" href="script.js">
    <noscript><link rel="stylesheet" type="text/css" href="stylesheet.css"></noscript>

    then you just copy all my code up to the </script> part and stick it in another text file and save it as script.js

    the longer code is doing a lot of things:
    1. checking to see the user's browser has javascript enabled. if not, it tells the user to enable javascript in order to see the site
    2. checks for many different browsers - IE, mozilla, netscape, opera, webtv, safari, IE/Mac
    3. checks for the particular version of that browser
    4. checks the version of javascript
    suffice it to say, it's a very very thorough script that checks for every possible combination of javascript and browser version and thus allows you to create a website perfectly tailored to just about anybody. the bad part about this is the site can just get huge - you could have like 10 possible stylesheets for example, would you want to develop that much?

    mine is a little mroe basic. it checks the browser to see if it is Microsoft and then loads a stylesheet for Internet Explorer. if the browser is anything other than Microsoft it loads a different stylesheet. it cannot differentiate between opera, firefox, netscape, etc. so if you have separate stylesheets for each browser then this isn't a good script for you

  7. #7
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Why are you messing with Javascript to work out which stylesheet to attach. There are quirks in the way that stylesheets themselves are coded that will allow you to attach different stylesheets for different browsers even with Javascript disabled eg specifying media="all" will stop Netscape 4 from using a stylesheet, you can use if statements in the HTML to select IE versions to attach stylesheets, etc.

  8. #8
    Join Date
    May 2003
    Location
    Andover, UK
    Posts
    410
    I use FireFox as do many other users and can therefore turn off javascripts and mine has a user agent switcher so it can pretend to be IE, Opera, etc so you really need to take Felgall's approach and save yourself a lot of work.

  9. #9
    Join Date
    May 2005
    Posts
    60
    Quote Originally Posted by felgall
    Why are you messing with Javascript to work out which stylesheet to attach. There are quirks in the way that stylesheets themselves are coded that will allow you to attach different stylesheets for different browsers even with Javascript disabled eg specifying media="all" will stop Netscape 4 from using a stylesheet, you can use if statements in the HTML to select IE versions to attach stylesheets, etc.

    i was unaware of any other means. can you be more specific about this please? or point me to a good reference? my goal is to have a website that is 100% css and as compatible as possible. (if that's possible)

  10. #10
    Join Date
    Mar 2005
    Location
    CA
    Posts
    323
    Search the boards for threads which might answer your question. That's a link by the way, to a thread in the javascript forum (you were asking about javascript, right?), which asks the same exact question as you.

    Hope this helps!

  11. #11
    Join Date
    Feb 2010
    Posts
    1

    Auto detect brosers to give a warning

    Hi

    I am also trying to put up a page which says that the page will work properly with Mozilla Fireox version xyz

    How to auto detect what browser the surfer is using and in case it is not Mozilla, how do we give hima warning?

    PLEASE HELP

    TIJU

  12. #12
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles