Auto-detect Browsers?

jerseydubs · #1 06-17-2005, 06:01 PM

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.

griff777 · #2 06-17-2005, 08:37 PM

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)            ? 1 : 0;

var IE4            =    (document.all)                ? 1 : 0;

var ver4        =    (NS4 || IE4)                ? 1 : 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(debug1) jsv= 1.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 k = 0; k<tmp.length; k++){    

            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 > 0) ffagt = 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 > 0 ) {                        // 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 i= 0;i<fs.length;++i){                //for each fs[i]...

            fmn += "" + fs[i] + "";                 //concatenate any "number" to a tmp string.

            if(i==0) fmn += ".";                    //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(w > 0) getElementById(obj_).style.width    = w;

            if(h > 0) getElementById(obj_).style.height    = h;

        }else{    

            if(w > 0) obj_.style.width    = w;

            if(h > 0) obj_.style.height    = h;

        }    

    }

}

griff777 · #3 06-17-2005, 08:39 PM

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 -->

kendokendokendo · #4 06-18-2005, 02:47 PM

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">

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

jerseydubs · #5 06-18-2005, 02:56 PM

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.

kendokendokendo · #6 06-18-2005, 03:53 PM

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

felgall · #7 06-18-2005, 05:20 PM

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.

gizmo · #8 06-19-2005, 03:22 PM

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.

jerseydubs · #9 06-23-2005, 06:19 PM

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)

acorbelli · #10 06-23-2005, 06:25 PM

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!

ttiju · #11 02-08-2010, 12:52 AM

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

toicontien · #12 02-21-2010, 10:59 PM

Get it working in Firefox, Opera, Safari and Chrome first. That will get you writing standard CSS. Then come back here and we can help you hack the styles to get IE to play nice. It's a lot less work.

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)