PDA

View Full Version : need a little help with a browser check



NyNe
05-10-2009, 12:40 AM
so this script is really just a combination of two other scripts (one was to display a warning bar on vBulletin forums asking users to register, the other was to detect and display what browser a visitor is using)

the first part i have called bcheck.js

var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version"
},
{
prop: window.opera,
identity: "Opera"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS : [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.userAgent,
subString: "iPhone",
identity: "iPhone/iPod"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]

};
BrowserDetect.init();

if (BrowserDetect.browser == "Netscape" || BrowserDetect.browser == "Mozilla") {
document.write('<div id="infobar"><a href="http://browsehappy.com/browsers/"><span>This web site is best viewed in a modern browser!</span></a></div>');
} else {
if (BrowserDetect.browser == "Chrome" && BrowserDetect.version < "1") {
document.write('<div id="infobar"><a href="http://www.google.com/chrome/"><span>For the best experience at this site, please update your browser!</span></a></div>');
}
if (BrowserDetect.browser == "OmniWeb" && BrowserDetect.version < "5") {
document.write('<div id="infobar"><a href="http://www.omnigroup.com/applications/omniweb/"><span>For the best experience at this site, please update your browser!</span></a></div>');
}
if (BrowserDetect.browser == "Safari" && BrowserDetect.version < "3") {
document.write('<div id="infobar"><a href="http://www.apple.com/safari/"><span>For the best experience at this site, please update your browser!</span></a></div>');
}
if (BrowserDetect.browser == "Opera" && BrowserDetect.version < "9") {
document.write('<div id="infobar"><a href="http://www.opera.com/"><span>For the best experience at this site, please update your browser!</span></a></div>');
}
if (BrowserDetect.browser == "iCab" && BrowserDetect.version < "4") {
document.write('<div id="infobar"><a href="http://www.icab.de/"><span>For the best experience at this site, please update your browser!</span></a></div>');
}
if (BrowserDetect.browser == "Konqueror" && BrowserDetect.version < "4") {
document.write('<div id="infobar"><a href="http://www.konqueror.org/"><span>For the best experience at this site, please update your browser!</span></a></div>');
}
if (BrowserDetect.browser == "Firefox" && BrowserDetect.version < "3") {
document.write('<div id="infobar"><a href="http://www.firefox.com/"><span>For the best experience at this site, please update your browser!</span></a></div>');
}
if (BrowserDetect.browser == "Camino" && BrowserDetect.version < "1") {
document.write('<div id="infobar"><a href="http://caminobrowser.org/"><span>For the best experience at this site, please update your browser!</span></a></div>');
}
if (BrowserDetect.browser == "Explorer" && BrowserDetect.version < "8") {
document.write('<div id="infobar"><a href="http://www.microsoft.com/windows/Internet-explorer/"><span>For the best experience at this site, please update your browser!</span></a></div>');
}
}

//BrowserDetect.browser
//BrowserDetect.version
//BrowserDetect.OS

the next part i have called bcheck.css

body {
margin: 0 !important;
padding: 0 !important;
}

/* A fake IE information bar */
#infobar {
position: fixed;
top: 0;
white-space: nowrap;
text-align: left;
width: 100%;
z-index: 999999;
font: message-box;
}

/* Please adjust the values if the infobar is not looking good */
#infobar a, #infobar a:link, #infobar a:visited, #infobar a:active {
display: block;
color: #000;
width:100%;
background: #FFFFE1 url(warning.gif) no-repeat fixed .3em .3em;
border-bottom: .16em outset;
text-decoration: none;
cursor: default;
}

#infobar a:hover {
color: #FFF;
background: #3169B6 url(warning2.gif) no-repeat fixed .3em .3em;
}

#infobar span {
display:inline-block;
margin:0px;
padding: .45em 0em .45em 22px;
font-size:11px;
}
and then there are two gif files attached
and of course the code to place it in your page

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

so this is what it's SUPPOSED to do (and it does);
-if a user is using mozilla or netscape (two dead browsers) tell them to get a modern browser
-if a user is using an out of date version of chrome, omniweb, safari, opera, icap, konqueror, firefox, camino, or internet explorer, ask them to update
-otherwise display nothing
-if a user is using a browser the script is not made to detect, display nothing

so im basically wondering if there is anything that can be done better (im a little iffy about the CSS being displayed properly in older browsers)
also i know this only detects the common browsers, and can be made to detect others, but i really dont know of a decent way to cover EVERY browser without making this script gigantic and unnecessary, so i think this is decent enough

i would love input on this, so thanks if you can help