How can I display HTML elements based on OS?

Question

This is what I have so far. Essentially we have an internal website that uses AFP links for Mac users and Windows IE style links for PC users. We have maintained the pages separately in the past, but I'm trying to unify them. I'm using divs with ID's "brandsmac" and "brandspc" and attempting to hide the parts that are not necessary for each type of user. When I run this my page just comes back blank. To throw another wrench in here, this is a Wordpress site with a pure HTML front page. This is the front page. I have found similar posts here and many of them helped, but I've hit a roadblock. Thanks in advance.

function loadBrandsPage() {
    var OSName="Unknown OS";
    if (navigator.appVersion.indexOf("Win")!=-1) { 
        OSName="Windows";
    } else {
        OSName="MacOS";
    }
    if(OSName == "Windows") {
        document.getElementById("brandsmac").style.display = 'none';
        document.getElementById("brandspc").style.visibility="visible"; 
    }
    if(OSName == "MacOS") {
        document.getElementById("brandsmac").style.visibility="visible";
        document.getElementById("brandspc").style.display = 'none';
    }
}

if i call your function i get "ReferenceError: Windows is not defined" — Roland Starke, Mar 23 '16 at 14:38
Didn't you forgot the quotes around the strings "Windows" and "MacOS"? — Brett, Mar 23 '16 at 14:40
Thanks for your answers Brett and Roland. I just noticed the missing quotes around Windows and MacOS. I've corrected that, but still nothing. — Chris Jackson, Mar 23 '16 at 15:01
When I run your function it seems to operate as expected (now that you've added quotes), What error message are you getting? Do you have the IDs properly named & in place? — EnigmaRM, Mar 23 '16 at 15:05
This is the error I'm getting: TypeError: document.getElementById(...) is null — Chris Jackson, Mar 23 '16 at 19:32
I figured it out and it's working now. I had to reverse the order and run the script after the ID was declared. I followed the advice on this [post](http://stackoverflow.com/questions/27562252/javascript-typeerror-document-getelementbyid-is-null). Thanks for all of your help! — Chris Jackson, Mar 23 '16 at 20:33

score 0 · Accepted Answer · edited May 23 '17 at 12:31

You're using a mixture of CSS display and visibility. If you change the line document.getElementById("brandspc").style.visibility="visible"; to document.getElementById("brandspc").style.display="block"; it'll work.

I'm assuming you've started off by hiding both elements (#brandspc and #brandsmac) with a display: none; So trying to change the visibility of it won't yield any results.

display: none: removes the element from the DOM.

visibility: hidden: hides the element from the user, it preserves the element's spacing.

If you'd rather that this happen on page load (as indicated in your comment), you can utilize a self-invoking function. You would just take the existing function and wrap it in parenthesis:

(function loadBrandsPage() {
    var OSName="Unknown OS";
    if (navigator.appVersion.indexOf("Win")!=-1) { 
        OSName="Windows";
    } else {
        OSName="MacOS";
    }
    if(OSName == 'Windows') {
        document.getElementById("brandsmac").style.display = 'none';
        document.getElementById("brandspc").style.display="block"; 
    }
    if(OSName == 'MacOS') {
        document.getElementById("brandsmac").style.display="block";
        document.getElementById("brandspc").style.display = 'none';
    }
})();

I've updated my fiddle to reflect this as well.

more info

Here's a demo of it working with the above changes

Thanks for your answer EnigmaRM. I saw your demo and appreciate the work you've done to test it. However, your solutions relies on a button to be clicked. I was hoping to run the function on load of the page. I saw another post [here](http://stackoverflow.com/questions/3961422/conditional-display-of-html-element-forms) that shows the code `` but that doesn't seem to be working for me either. — Chris Jackson, Mar 23 '16 at 19:28
The button was just a way to trigger the function. You can use any event you want to trigger the function. I've updated my answer so that it happens automatically on page load. We could even go a different route and assign the function to an event listener to wait for the DOM to be ready. — EnigmaRM, Mar 23 '16 at 20:34

score -1 · Answer 2 · answered Mar 23 '16 at 14:41

-1

You can find out the operating system this way:

os = navigator.platform;

answered Mar 23 '16 at 14:41

kasynych

50
2

How can I display HTML elements based on OS?

2 Answers2