Show or Hide Div based on OS

Question

Show or Hide Div based on OS

3.4k views Asked by JBithell At 25 November 2024 at 00:53

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>

Original Q&A

There are 2 answers

Eugene Naydenov On 04 January 2014 at 14:33

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

**Samleo** · Accepted Answer · 2014-01-04 14:25:54

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";

TechQA.

Show or Hide Div based on OS

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in OPERATING-SYSTEM

Related Questions in DETECTION

Related Questions in OS-DETECTION

Popular Questions

Popular Tags

Trending Questions