Change class when using IPAD with JQuery

How would one change the class on a:link when a user is using an ipad.

I'm using a slide out lightbox to display a video but I would like the lightbox to change when the user is using an 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',
              开发者_Python百科  '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;
    })

Thanks for your help.

---

This will set a variable called iPad which is True on an iPad and False elsewhere.

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

You can use that to decide which code path to run using

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

---

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

---

Short answer: you shouldn't. Provinding the user with the same experience in any browser he uses is a major design principle (if there are no resolution contraints, like in mobile phones)

If you still want to do it, detect it with:

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

        // do something special

    }
});

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