PDA

View Full Version : Browser Detection...



onestopplay
08-08-2009, 09:02 PM
Here's my 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:


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



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

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

onestopplay
08-09-2009, 09:24 PM
Thank you guys both.
I will try it out now and let you know how it goes.

onestopplay
08-09-2009, 10:05 PM
Unfortunately, none worked. I have no idea why. I think it might be my version of IE...I will try upgrading.