Rectangle 27 0

javascript Hide HTML element if user is on an iOS device?


$(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();
  }
});
<!DOCTYPE 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>
<html>
  • <input>'s are supposed to be used in <form>'s.
  • 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).
  • I've also changed the type of the input from submit to button.
  • You should only have one <body>, and can merge the two seperate <script>'s into one.

@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.

@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.

@better_use_mkstemp True, I was wondering about the need for autoplay. Will incorporate into an edit along with more about the p variable.

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

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

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?.

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.

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

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.

Note