Hide HTML element if user is on an iOS device?

Question

I want the code to check if a user is on an iOS device, and then, if they are not, hide the HTML input type "Play" button.

So, in my code, I'm sure if my iOS checking is wrong, of the code to hide the "Play" button, or both:

<!DOCTYPE html>
<html>    
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>                               

<script type="text/javascript">             
    var iOS = false,
    p = navigator.platform;

    if( p === 'iPad' || p === 'iPhone' || p === 'iPod' ) {
      iOS = true;
    }               
    if (iOS === false) {                    
      $("input").hide();
    }
</script>

<script type="text/javascript">
    function load() {
        var vid = document.getElementById('vid');
        vid.addEventListener('ended', function() {
          /*    alert('video ended'); */
          /*   vid.load(); */
        },false);
    }
</script>

<title>NEW ENTRY TEST</title>
</head>

<body>

<body onload="load();">

<video id="vid" src="http://awp.diaart.org/ali/test/movies/testmovie.mov" width="640" height="480" autoplay></video>
<br>
<input type="submit" value="Play" onclick="document.getElementById('vid').play();">

</body>

</body>

</html>

Basically I just want this play button to display, only if the user is on an iOS device.

I know it's not working because the play button still displays on a regular (non-iOS) computer.

Curious to hear anyone's thoughts on this.

How doesn't it work? Have you checked the value of `p`? Tried it on an iOS device and non-iOS device? — dsgriffin, Jun 04 '13 at 21:52
Hey Zenith, thanks for the response. The "play" button still loads on a regular computer, so it can't be working. — shadowmoses, Jun 04 '13 at 21:54
Also, I'm terribly new to Javascript. How would I check the value of `p`? I cobbled the code together after hours of research. — shadowmoses, Jun 04 '13 at 21:56

score 5 · Accepted Answer · edited May 23 '17 at 12:08

5

jsFiddle example here.

Firstly, it should be wrapped inside a $(document).ready:

$(document).ready(function(){  
  var iOS = false,
  p = navigator.platform;
  if( p === 'iPad' || p === 'iPhone' || p === 'iPod' ) {
     iOS = true;
  }
  if (iOS === false) {
     $("input[type=button]").hide();
  }
});

Now, the only potential problem you have left is your check case case using navigator.platform.

According to the specification, navigator.platform returns one of the following values: "Win32", "Linux i686", "MacPPC", "MacIntel" - none of which match your check case.

However, other sources on the internet seem to suggest that it does indeed return "iPhone", "iPad" etc. on the respective devices. As I don't own one of these devices, I can't test that theory out. But if it doesn't work as suggested, there are other documented ways to detect the iPhone, iPad and iPod - see Detect iPad users using jQuery?.

Once you've tested a solution that detects all three iOS products, store it in your p variable and your code should function as you wish.

Side Notes:

You should only have one <body>, and can merge the two seperate <script>'s into one.
You don't need both <!DOCTYPE html> and <html>. Remove the <html>.
<input>'s are supposed to be used in <form>'s.
I've also changed the type of the input from submit to button.
As @better_use_mkstemp mentioned, I don't see the need for the autoplay attribute on your <input> in this use-case (especially as you don't want it to be playable on iOS devices anyway).

Updated HTML:

<body onload="load();">
 <video id="vid" src="http://awp.diaart.org/ali/test/movies/testmovie.mov" width="640" height="480" autoplay></video>
  <br>  
  <input type="button" value="Play" onclick="document.getElementById('vid').play();"> 
</body>

edited May 23 '17 at 12:08

Community

1
1

answered Jun 04 '13 at 22:07

dsgriffin

66,495
17
137
137

2

In addition to this, remove `autoplay` if you really want the play button to be used sometimes. You could also set an id for the button and do something like: `document.getElementById('playButton').style.visibility='hidden';`. Also an easy way to check the value of p, do an `alert(p)` to have it pop up. – Display Name is missing Jun 04 '13 at 22:16
1

@better_use_mkstemp True, I was wondering about the need for autoplay. Will incorporate into an edit along with more about the p variable. – dsgriffin Jun 04 '13 at 22:18
1

@Zenith `$(document).ready();` is no longer necessary: http://answers.oreilly.com/topic/2353-5-things-you-might-not-know-about-jquery/ – Jody Heavener Jun 04 '13 at 22:41
@JodyHeavener He doesn't give a reason why though? Also, the code in the document ready isn't a function, it is loose code. – dsgriffin Jun 04 '13 at 22:42
@Zenith honestly I've no idea why, I've just seen it a lot in reading and personally I've never run in to problems while avoiding it. Am I misguided? – Jody Heavener Jun 04 '13 at 22:44
2

@JodyHeavener Well, I can understand the article, I barely have to use $(document).ready() either, I guess people have their preferences. However, that article mentions "If you want the function..", but the OP's code here is loose code, not related to any function. – dsgriffin Jun 04 '13 at 22:47
1

@Zenith - you have brought me to the peak of the mountain-top. You deserve your handle. Many thanks rain down upon thee from said mountain. – shadowmoses Jun 05 '13 at 13:59
you have a syntax mistake in your code: line 2 `var iOS = false;` <- semicolon(;) not comma. ;-) – Kalaschni Feb 21 '14 at 09:10
@Kalaschni In JavaScript we can do multiple assignments without re-declaring the var keyword, e.g. `var a = "a", b = "b", c = "c";` – dsgriffin Feb 21 '14 at 12:56

score 0 · Answer 2 · answered Jun 04 '13 at 22:11

0

Try taking out the if (p =='iPad') statement, and see if it hides it then. If it does, that means it's reading the platform as an iOS device.

answered Jun 04 '13 at 22:11

dunnmifflsys

613
2
9
21

Hide HTML element if user is on an iOS device?

2 Answers2

Linked