Change class when using iPad using jQuery

Question

How to change class to link: when user uses ipad.

I use the lightbox slidebox to display the video, but I would like the lightbox to change when the user uses the ipad.

<a href="#" class="video">Watch</a> 

e.g. web version

 /* Video overlay */ // Hide on load $('.video-player').hide(); // Show the video player $('.video').click(function() { $('.video-player').show('slow'); return false; }); //Hide the video player $('.close-video').click(function() { $('.video-player').hide('slow'); return false; }) 

IPad version

 /* Video overlay */ // Hide on load $('.video-player').hide(); // Show the video player $('.video').fancybox({ 'content' : $('.video-player').html(), 'titlePosition' : 'inside', 'transitionIn' : 'none', 'transitionOut' : 'none', 'overlayColor' : '#fff', 'overlayOpacity' : 0, 'scrolling' : 'no', 'onComplete' : function(){ $('.pop-detail input.button, .pop-detail a').click(function(){ $.fancybox.close(); }) }, 'onClosed' :function(){ } }); //Hide the video player $('.close-video').click(function() { $('.video-player').hide(); return false; }) 

Thank you for your help.

Answer 1

This will set the iPad variable, which is True on the iPad and False elsewhere.

 var iPad = navigator.userAgent.match(/iPad/i) != null; 

You can use this to decide which code path to run with

 if (iPad) { // iPad version } else { // Normal version } 

Answer 2

 if (navigator.platform.indexOf("iPad") != -1)){ /* second code snippet, you are on the iPad */ }else{ /* first snippet, normal behaviour */ } 

Answer 3

Short answer: you should not. Providing the user with the same experience in any browser that he uses is the main principle of development (if there are no permissions, for example, on mobile phones)

If you still want to do this, define it with

 jQuery(document).ready(function($){ var deviceAgent = navigator.userAgent.toLowerCase(); var agentID = deviceAgent.match(/(ipad)/); if (agentID) { // do something special } }); 

link: http://snipplr.com/view/31607/iphone-ipad-ipod-detect/