JavaScript
Article

10 Useful jQuery iPad Code Snippets and Plugins

By Sam Deering

We have put together some of the easy to use tricks, code snippets and plugins all for the iPad device. Be sure to let us know in the comments which snippets and plugins you found useful and of any others that you know of that can be useful.

1. Detecting iPad Orientation in Safari using JavaScript

Style your website or re-order your content to match exactly your iPad’s orientation. Here’s an example on how to detect the current orientation of the iPad device either by pressing a button or when the orientation changes, using an event called onOrientationChange…


Using the media definition, you can also use CSS Stylesheets:


Source

2. jQuery Add Drag/Touch Support for iPad

jQuery code snippet to apply Drag/Touch Support for the iPad and devices with touch support.

//iPAD Support
$.fn.addTouch = function(){
  this.each(function(i,el){
    $(el).bind('touchstart touchmove touchend touchcancel',function(){
      //we pass the original event object because the jQuery event
      //object is normalized to w3c specs and does not provide the TouchList
      handleTouch(event);
    });
  });
 
  var handleTouch = function(event)
  {
    var touches = event.changedTouches,
            first = touches[0],
            type = '';
 
    switch(event.type)
    {
      case 'touchstart':
        type = 'mousedown';
        break;
 
      case 'touchmove':
        type = 'mousemove';
        event.preventDefault();
        break;
 
      case 'touchend':
        type = 'mouseup';
        break;
 
      default:
        return;
    }
 
    var simulatedEvent = document.createEvent('MouseEvent');
    simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0/*left*/, null);
    first.target.dispatchEvent(simulatedEvent);
  };
};

Source

3. TouchSwipe jQuery plugin for iPad, iPhone and Android

A jquery plugin to be used with jQuery on touch input devices such as iPad, iPhone etc.
TouchSwipe
SourceDemo

4. jQuery iPad one finger scroll

Touch devices (iPad, iPhone, Android etc) have quite weird behavour for scrolling overflow:auto elements. iPad requires two finger scrolling and dosen’t add any scrollbars to make it obvious. This plugin allows you to scroll an overflow:auto element with one finger.
jQuery iPad one finger scroll
SourceDemo

5. jQuery Detect Mobile Devices – iPhone iPod iPad

jQuery code snippet to detect if a user is viewing the website using a mobile device, specifically an iPhone iPod or iPad.

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

        // mobile code here
 
	}
});

Source

6. Multiselect picklist jquery plugin for iPad and Desktop browsers

A multi-row/multiselect picklist that looks similar in both desktop and iPad browser.

We could have easily used the usual Visualforce tag i.e. for the purpose, like this:


   
 

Source

7. JQUERY CLICK EVENTS ON THE IPAD

A solution to fix it. This was the advice given in the developer docs at apple.com. This basically searches for iPad in the userAgent string (case insensitive). If the user is on an iPad we use touchstart and if not we default back to a standard click.

The code you need is:

var ua = navigator.userAgent, 
    event = (ua.match(/iPad/i)) ? "touchstart" : "click";

$("#theElement").bind(event, function() {
     // jquery code
}

Source

8. Easy iPad Gestures in your website with jQuery

jQuery makes this so easy to integrate and use that I couldn’t help but fool around with it.

First off all make sure you have the latest jQuery library included in your site. Include it directly from the site like this:

Second step, download the TouchWipe library from the author website OR you can just bind the Touchwipe to the .
Include the touchwipe library before the tag. ex:

Then initialise TouchWipe on to the body tag, and give the gestures the chosen action to perform, for this example I just used alerts:

$(document).ready(function(){
            $('body').touchwipe({
                wipeLeft: function(){ alert('You swiped left!') },
                wipeRight: function(){ alert('You swiped right!') },
                wipeUp: function(){ alert('You swiped up!') },
                wipeDown: function(){ alert('You swiped down!') }
            })
        })

Touchwipe can be added to a specific div as well rather than the body tag. And there ya go. You could add that to any html page to add swipe Gestures.
Source

9. IPHONE/IPAD DOUBLETAP EVENT HANDLER

Enable the use of “doubletap” events on iPhone and iPad devices. The functionality is still available when the plugin is used on Desktop Browser. This means that you don’t have to worry about the environment where the plugin is used.
IPHONE/IPAD DOUBLETAP EVENT HANDLER
SourceDemo

10. jQuery.UI.iPad plugin

Provides an interface layer to map touch events to jQuery UI interface elements.

$(function() {
  //
  // Extend jQuery feature detection
  //
  $.extend($.support, {
    touch: typeof Touch == "object"
  });
  
  //
  // Hook up touch events
  //
  if ($.support.touch) {
    document.addEventListener("touchstart", iPadTouchHandler, false);
    document.addEventListener("touchmove", iPadTouchHandler, false);
    document.addEventListener("touchend", iPadTouchHandler, false);
    document.addEventListener("touchcancel", iPadTouchHandler, false);
  }
});


var lastTap = null;      // Holds last tapped element (so we can compare for double tap)
var tapValid = false;      // Are we still in the .6 second window where a double tap can occur
var tapTimeout = null;      // The timeout reference

function cancelTap() {
  tapValid = false;
}


var rightClickPending = false;  // Is a right click still feasible
var rightClickEvent = null;    // the original event
var holdTimeout = null;      // timeout reference
var cancelMouseUp = false;    // prevents a click from occuring as we want the context menu


function cancelHold() {
  if (rightClickPending) {
    window.clearTimeout(holdTimeout);
    rightClickPending = false;
    rightClickEvent = null;
  }
}

function startHold(event) {
  if (rightClickPending)
    return;

  rightClickPending = true; // We could be performing a right click
  rightClickEvent = (event.changedTouches)[0];
  holdTimeout = window.setTimeout("doRightClick();", 800);
}


function doRightClick() {
  rightClickPending = false;

  //
  // We need to mouse up (as we were down)
  //
  var first = rightClickEvent,
    simulatedEvent = document.createEvent("MouseEvent");
  simulatedEvent.initMouseEvent("mouseup", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
      false, false, false, false, 0, null);
  first.target.dispatchEvent(simulatedEvent);

  //
  // emulate a right click
  //
  simulatedEvent = document.createEvent("MouseEvent");
  simulatedEvent.initMouseEvent("mousedown", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
      false, false, false, false, 2, null);
  first.target.dispatchEvent(simulatedEvent);

  //
  // Show a context menu
  //
  simulatedEvent = document.createEvent("MouseEvent");
  simulatedEvent.initMouseEvent("contextmenu", true, true, window, 1, first.screenX + 50, first.screenY + 5, first.clientX + 50, first.clientY + 5,
                                  false, false, false, false, 2, null);
  first.target.dispatchEvent(simulatedEvent);


  //
  // Note:: I don't mouse up the right click here however feel free to add if required
  //


  cancelMouseUp = true;
  rightClickEvent = null; // Release memory
}


//
// mouse over event then mouse down
//
function iPadTouchStart(event) {
  var touches = event.changedTouches,
    first = touches[0],
    type = "mouseover",
    simulatedEvent = document.createEvent("MouseEvent");
  //
  // Mouse over first - I have live events attached on mouse over
  //
  simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
                            false, false, false, false, 0, null);
  first.target.dispatchEvent(simulatedEvent);

  type = "mousedown";
  simulatedEvent = document.createEvent("MouseEvent");

  simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
                            false, false, false, false, 0, null);
  first.target.dispatchEvent(simulatedEvent);


  if (!tapValid) {
    lastTap = first.target;
    tapValid = true;
    tapTimeout = window.setTimeout("cancelTap();", 600);
    startHold(event);
  }
  else {
    window.clearTimeout(tapTimeout);

    //
    // If a double tap is still a possibility and the elements are the same
    //  Then perform a double click
    //
    if (first.target == lastTap) {
      lastTap = null;
      tapValid = false;

      type = "click";
      simulatedEvent = document.createEvent("MouseEvent");

      simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
                           false, false, false, false, 0/*left*/, null);
      first.target.dispatchEvent(simulatedEvent);

      type = "dblclick";
      simulatedEvent = document.createEvent("MouseEvent");

      simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
                           false, false, false, false, 0/*left*/, null);
      first.target.dispatchEvent(simulatedEvent);
    }
    else {
      lastTap = first.target;
      tapValid = true;
      tapTimeout = window.setTimeout("cancelTap();", 600);
      startHold(event);
    }
  }
}

function iPadTouchHandler(event) {
  var type = "",
    button = 0; /*left*/

  if (event.touches.length > 1)
    return;

  switch (event.type) {
    case "touchstart":
      if ($(event.changedTouches[0].target).is("select")) {
        return;
      }
      iPadTouchStart(event); /*We need to trigger two events here to support one touch drag and drop*/
      event.preventDefault();
      return false;
      break;

    case "touchmove":
      cancelHold();
      type = "mousemove";
      event.preventDefault();
      break;

    case "touchend":
      if (cancelMouseUp) {
        cancelMouseUp = false;
        event.preventDefault();
        return false;
      }
      cancelHold();
      type = "mouseup";
      break;

    default:
      return;
  }

  var touches = event.changedTouches,
    first = touches[0],
    simulatedEvent = document.createEvent("MouseEvent");

  simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
                            false, false, false, false, button, null);

  first.target.dispatchEvent(simulatedEvent);

  if (type == "mouseup" && tapValid && first.target == lastTap) {  // This actually emulates the ipads default behaviour (which we prevented)
    simulatedEvent = document.createEvent("MouseEvent");    // This check avoids click being emulated on a double tap

    simulatedEvent.initMouseEvent("click", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
                            false, false, false, false, button, null);

    first.target.dispatchEvent(simulatedEvent);
  }
}

Source

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

  • Pingback: Qoozon » Cool Stuff For Web Designers #5()

  • http://twitter.com/JanesOosthuizen Janes Oosthuizen

    Thanks for including my article! Much appreciated.

  • http://www.websitetemplates.org/ Stacy Summers

    WOW! huge collection! Thanks

  • Julie Lewis

    do you have examples? I would really like to know how to make desktop multi-select lists work like they do on the iPad, but I’m not sure if that’s what the code above does.

  • Melissa

    I used the jQuery button one you provided; however, all it does is allow you to hit the button prior to viewing a website in landscape or portrait mode but doesn’t fix the fact that the site is in disarray in portrait mode on iPads..not sure if that’s a jQuery issue or WordPress. I was hoping jQuery could fix the parameters of a site in portrait mode.

  • Harmeet Singh

    After apply: 10. jQuery.UI.iPad plugin, my iPad works fine, all context menu working, but I can not scroll page now. I have overflow auto of a div, in all other browser it is showing scroll and working, but scroll not working in iPad and iPhone

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.