I am building a page that will allow a simple user to check their browser version and then depending on what browsers and operating system will show a certain div. Then based on version add a certain class to a tag.
I found this code to detect the browser, version, and operating system. Code Follows:
// Detect Browser and OS
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",
versionSearch: "Version"
},
{
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/iPad"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]
};
BrowserDetect.init();
I do not know where to start with the javascript to show certain divs.
My idea is that based on what the above code shows it will either show a red or green button based on the version number and a DIV. For example if the browser is Internet Explorer and the Version is 8 then it will show a red button and a div with certain options.
Idea for code:
<div style="width:400px;" class="center">
<script type="text/javascript">
document.write('<p class="[insert either red or green based on version number]-button">You\'re using ' + BrowserDetect.browser + ' ' + BrowserDetect.version + ' on ' + BrowserDetect.OS + '</p>');
</script>
</div>
<!-- Show either Outdated DIV or Up to Date Div based on version number I specify. -->
<div id="outdated">
<!-- Content -->
</div>
<div id="up-to-date">
<!-- Content -->
</div>
<!-- Show if Windows -->
<div id="windows">
<!-- Content -->
</div>
<!-- Show if MAC -->
<div id="mac">
<!-- Content -->
</div>
<!-- Show if Linux -->
<div id="linux">
<!-- Content -->
</div>
<!-- Show if Unknown or Other -->
<div id="other">
<!-- Content -->
</div>
Example
Let us say an user visit the page and is running Firefox 10 on Windows. The following code would show:
<div style="width:400px;" class="center">
<script type="text/javascript">
document.write('<p class="red-button">You\'re using ' + BrowserDetect.browser + ' ' + BrowserDetect.version + ' on ' + BrowserDetect.OS + '</p>');
</script>
</div>
<div id="outdated">
<p>You are using an outdated browser.</p>
</div>
<div id="windows">
<!-- Links to update browser. -->
</div>
I hope this is clear and I will answer any and all questions. I have not attempted any code so far as I do not know where to start beyond detecting the bowser, version, and OS.
I cannot use any server side scripting. I am using a hosted CMS and do not have server side access. I am using jQuery 1.8 on my page however I do not want to use $.browser since it is deprecated. (With that said if it is much easier or the only was to do this in just JS then I am willing to use it and will maintain an older version of jQuery for this page.) Also I assume that I will have to manually specify what versions are outdated and not. (I.E. If version is less than 14 the browser is outdated.) If there is a way to tell the script what is the most updated version released then great but not required.
An Important Note: I am a novice at JS and open to any and all code that will work for my purposes which are creating a simple and easy to use page for a user of my service/site to check their browser and browser version. While normally I would agree that user agent sniffing should be avoided in this case I do not see a way around it to do what I would like. Since I am a novice please provide examples.
Fair enough. I can see that you’re forced to use JS, and honestly, this script is about as good as it’s going to get.
With the above code in place, you’ll want to use what I provide to you after that script.
Let’s assume we have a div in place.
Now we’ll need to write out conditional statements for the version/platforms. This is going to be a long list, because unfortunately you need to reverse engineer this code to work as you’d want.