Show or Hide Div based on OS

Question

I operate a website in which I would like to be able to advertise an downloadable program for windows only.

The advert for this will lie inside a div called 'adforwindows'.
I would like to use a detection method similar to the one listed here: http://www.javascripter.net/faq/operatin.htm

Summary:

If Operating System = Windows

Then set visibility of Div 'adforwindows' to visible
Else Set visibility of Div 'adforwindows' to hidden

Does anyone know a good html/javascript script that can do this?

EDIT

Is this a solution? Can't seem to get it to work;

<!DOCTYPE html>
<html>
<head>
<script>
var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

if(OSName == "Windows"){
   document.getElementById('adforwindows').style.visibility = "visible";
}
else{
   document.getElementById('adforwindows').style.visibility = "hidden";
}
</script>
</head>
<body>
<div class="adforwindows">
Windows Advert 
</div>
<p>Main site content<P>
</body>
</html>

see here: http://stackoverflow.com/questions/11219582/how-to-detect-my-browser-version-and-operating-system-using-javascript — Canser Yanbakan, Jan 04 '14 at 14:18

Samleo · Accepted Answer · 2014-01-04T14:32:19.983

Since you would already know the OS from this code (taken from website)

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

You can thus use a simple if statement to check and document.getElementById to set the visibility.

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

if(OSName == "Windows"){
   document.getElementById('adforwindows').style.display = "block";
}
else{
   document.getElementById('adforwindows').style.display = "none";
}

If you do not need to know the other operating systems, just use this shorter code:

if (navigator.appVersion.indexOf("Win")!=-1)
   document.getElementById('adforwindows').style.display = "block";
}
else{
   document.getElementById('adforwindows').style.display = "none";
}

EDIT: if you want to have it visibility:none/visible instead of display:none (there is a difference: http://www.w3schools.com/css/css_display_visibility.asp you can change .style.display = "none"; to .style.visibility = "hidden"; and change .style.display = "block"; to .style.visibility = "visible";

Yes, this looks correct.. But you may want to put the script after the
. This is because the script will run before the div is initialised (if you check the console and see an error like "Cannot get style of undefined", this is your problem). Using jQuery onready will also help. — Samleo, Jan 05 '14 at 02:18

Eugene Naydenov · Answer 2 · 2014-01-04T16:11:34.627

You can use navigator.platform or navigator.appVersion.

For example:

var getOS = function() {
    var operatingSystems = {
        'Win': 'Windows',
        'Mac': 'MacOS',
        'Linux': 'Linux',
        'X11': 'UNIX'
    };
    for(var k in operatingSystems) {
        if(navigator.appVersion.indexOf(k) !== -1) {
            return operatingSystems[k];
        }
    }
    return undefined;
};

console.log(getOS());

var os = getOS();
document.getElementById('adforwindows').style.display = os === 'Windows'
    ? 'block'
    : 'none';

DEMO

See https://developer.mozilla.org/en-US/docs/Web/API/NavigatorID

Show or Hide Div based on OS

2 Answers2

Linked