0

I am trying to simply hide/show an element depending if you're on mac, windows, iphone, ipad etc.

I have 2 p elements: p1 - I want to show on windows p2 - I want to show on everything else (mac/iphone/ipad etc)

I found a script here that apparently detects operating system: http://www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/

So I linked to the script after a link to jquery, plus this to the page head:

if ($.client.os == 'Mac') {
    $('#download').hide(); $('#register').show();
}

if ($.client.os == 'iPhone') {
    $('#download').hide(); $('#register').show();
}

if ($.client.os == 'Windows') {
    $('#download').show(); $('#register').hide();
}

I cannot get it to work, any ideas?

MarcinJuraszek
  • 124,003
  • 15
  • 196
  • 263
James
  • 11
  • 6

1 Answers1

0

This thread has some solutions to your problem. Given the properties you're specifying, all you should need to do is:

if (navigator.appVersion.indexOf("Win")!=-1) {
    $('#register').hide();
    $('#download').show();
}

You shouldn't need to explicitly show elements since the client won't be changing OS. Just set the base visibility of #download and #register to whatever you 'default' configuration is (put #download { display: none; } in your CSS) and let the .hide() and .show() override them when necessary.

If you need more advanced OS detection, you can add other rules by replacing "Win" with an appropriate OS tag.

EDIT fixed jsFiddle: http://jsfiddle.net/2G4pz/5/

Community
  • 1
  • 1
metadept
  • 7,831
  • 2
  • 18
  • 25
  • Thanks metadept but this doesn't make sense if I have 2 elements I would have to hide element 1 and show element 2 if on mac/Ios and then if on windows hide element 2 and show element 1. Am I making sense here? – James Apr 01 '13 at 19:50
  • 1
    @James Yes, I'm just saying that you don't need to *change* the visibility for every case, you can have things as you want them for Mac by default, and then you only need to change them if the user is on Windows. If you want to explicitly set them that's fine, but it's not needed. – metadept Apr 01 '13 at 19:53
  • Thanks I get you, so you're saying as long as I have #download {display:none;} in my css the script above will over-ride this on windows machines and hide #register and show #download ? – James Apr 01 '13 at 19:57
  • @James Exactly. Here's a (very very simple) jsFiddle that demonstrates what I'm talking about: http://jsfiddle.net/2G4pz/3/ – metadept Apr 01 '13 at 20:01
  • Thanks @metadept I used your above code and tested on a windows machine though and still get the register div and not the download? – James Apr 01 '13 at 22:15
  • is it perhaps something to do with navigator.platform not being present? – James Apr 01 '13 at 22:54
  • @James I'll test it on my Windows machine when I get home and update my answer. – metadept Apr 01 '13 at 23:31
  • @James ...seems like I had the jsFiddle set up wrong (fixed now in the answer) but the code works (when it's used right :p) – metadept Apr 02 '13 at 01:26
  • It works! thanks so much mate, I was just being a little retarded in inserting it properly (javascript amateur here) - thanks for all your help. – James Apr 02 '13 at 08:45