Browser Detection...

**onestopplay** · 08-08-2009, 09:02 PM

Here's my code:

HTML Code:

<html>
<head>
<script type='text/javascript'>
var browser=navigator.appName;
if(browser == "Microsoft Internet Explorer")
{
var width=900;
}
else
{
var width=980;
}
</script>
</head>
<body>
<script type='text/javascript'>
document.write('<table cellpadding="0" cellspacing="0" width="' + width + '" align="center">);
</script>
<tr><td>HI!</td></tr>
</body>
</html>

However, it doesn't create the correct table width. In fact, it doesn't make a table at all. What am I doing wrong.
If your're wondering why I'm doing this, it's because my website looks different in IE. I know, weird, right?
Thanks in advanced for helping me!!

**rainarts** · 08-09-2009, 10:51 AM

Hi,

here's a simple demo, which allow you to detect specific versions' of IE based browser:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>www.dynamicdrive.com</title>
</head>
<body>
<center><script type="text/javascript">
<!--
var sniffer = ( function() {
var eWidth;
var browser = navigator.userAgent.toLowerCase();
   if((/msie[\s\/]+(\d+\.\d+)/.test( browser ))) // Detecting specific version of IE >>>

   var version = new Number( RegExp.$1 );
   eWidth = {
   // Specify the following width of your table on different version of IE mode browser:
 
      4 : 600 /* IE 4 */,
      5 : 800 /* IE 5 */,
      6 : 900 /* IE 6 */,
      7 : 960 /* IE 7 */,
      8 : 1024 /* IE 8 */ }[ version ];
   if( eWidth ) {
      document.write( "<table id=\"tableOne\" frame=\"border\" width=\"" + eWidth + "\" rules=\"all\" cellspacing=\"4\" cellpadding=\"4\" bgcolor=\"grey\" border=\"2\">\n" );
      document.write( "<tr>\n" );
      document.write( "<th>Browser :</th>\n" );
      document.write( "<td>Microsoft Internet Explorer " + String( RegExp.$1 ) + "</td>\n" );
      document.write( "</tr>" );
      document.write( "</table>" );
   return;    
   } alert( "Browser Broke: this page is optimized for IE based browser." );
   history.go( -1 );
} )( );
// -->
</script></center>
</body>
</html>

-rainarts

**onestopplay** · 08-09-2009, 12:44 PM

Ok thanks. Where do I put the width for Firefox/Safari/Chrome?? Thanks!!!!

**JShor** · 08-09-2009, 03:56 PM

Code:

<script type="text/javascript">
var tbl = document.getElementById('tbl');
if(navigator.userAgent.toLowerCase().indexOf("firefox") == true) {
tbl.width = 00;
} elseif(navigator.userAgent.toLowerCase().indexOf("safari) == true) {
tbl.width = 00;
} elseif(navigator.userAgent.toLowerCase().indexOf("chrome") == true) {
tbl.width = 00;
} elseif(navigator.userAgent.toLowerCase().indexOf("ie") == true) {
tbl.width = 00;
} else {
alert("No browser specified!");
}
</script>

<div id="tbl"></div>

HTH

**JShor** · 08-09-2009, 03:58 PM

Sorry, scratch the previous code.

Code:

<html>
<head>
<script type='text/javascript'>
var browser=navigator.appName;
if(navigator.userAgent.toLowerCase() == 'msie') {
var width=900;
}
else
{
var width=980;
}
</script>
</head>
<body>
<script type='text/javascript'>
document.write('<table cellpadding="0" cellspacing="0" width="' + width + '" align="center">);
</script>
<tr><td>HI!</td></tr>
</body>
</html>

**rainarts** · 08-09-2009, 04:02 PM

Hi,

here's the modified version of my sniffer that you can easily expand and use. I've included the 5 major browser in its collections' and provide more versatility compared to my first posted version:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>www.dynamicdrive.com</title>
</head>
<body>
<center><script type="text/javascript">
<!--
var sniffer = ( function() {
var eWidth;
var uName;
var bName, bVersion;
var mode = { // sniff the 5 major browsers. 
   chrome : { 
/* Google Chrome :
 - Specify desired width for
   Google Chrome browser */
      1 : 900  /* v1 */,
      2 : 1024 /* v2 */
   }, firefox : {
/* Mozilla Firefox :
 - Specify desired width for
   Mozilla Firefox browser */
      1 : 800  /* v1 */,
      2 : 960  /* v2 */,
      3 : 1024 /* v3 */
   }, msie : {
/* Internet Explorer :
 - Specify desired width for
   Internet Eplorer browser */
      4 : 600   /* v4 */,
      5 : 800   /* v5 */,
      6 : 900   /* v6 */,
      7 : 960   /* v7 */,
      8 : 1024 /* v8 */
   }, opera : {
/* Opera ASA :
 - Specify desired width for
   Opera browser */
      6 : 600   /* v6 */,
      7 : 800   /* v7 */,
      8 : 900   /* v8 */,
      9 : 960   /* v9 */,
      10 : 1024 /* v10 */
   }, safari : {
/* MAC Safari :
 - Specify desired width for
   Safari browser */
      3 : 800  /* v3 */,
      4 : 900  /* v4 */,
      5 : 1024  /* v5 */
   }
};

var browser = navigator.userAgent.toLowerCase();

var agent_string = [ "chrome", "firefox", "opera", "msie", "safari" ];
   for( var x = 0; !!( agent_string[ x ] ); x++ ) {
      if(( uName = new RegExp("(" + agent_string[ x ] + ")" + "[\\s\\/](\\d+\\.\\d+)", "i" )).test( browser )) {
      bName = RegExp.$1;
      bVersion = RegExp.$2;
      eWidth = new Number( mode[ bName ][ bVersion.match(/^\d/)[ 0 ]] );
      break;
      } 
   } 

/* 
 # the eWidth variable, will claim its value from the object mode variable, specified above.

 do your stuff >>> */

   if( eWidth ) {
      document.write( "<table id=\"tableOne\" frame=\"border\" width=\"" + eWidth + "\" rules=\"all\" cellspacing=\"4\" cellpadding=\"4\" bgcolor=\"grey\" border=\"2\">\n" );
      document.write( "<tr>\n" );
      document.write( "<th>Browser :</th>\n" ); 
      document.write( "<td style=\"background-color : #FFFFFF; letter-spacing : 3px; width : 85%; color : #405060;\">" + bName.charAt(0).toUpperCase() + bName.substr( 1 ) + " " + bVersion + "</td>\n" );
      document.write( "</tr>" );
      document.write( "</table>" );
   return;    
   } 
} )( );
// -->
</script></center>
</body>
</html>

hope it helps...