.NET FOLLOWER

jQuery plugin to catch a long click event

Below is a simple jQuery plugin to catch a long click or long press:

(function ($) {
  $.fn.longClick = function (callback, timeout) {
   // bind to element's mousedown event to track the longclick's beginning
   $(this).mousedown(function (event) {
    // save the initial event object
    var initialEvent = event;
    // set the delay after which the callback will be called
    var timer = window.setTimeout(function () { callback(initialEvent); }, timeout);
    // bind to global mouseup event for clearance
    $(document).mouseup(function () {
      // clear timer
      window.clearTimeout(timer);
      // unbind from global mouseup event
      $(document).unbind("mouseup");
      return true;
      // use 'return false;' if you need to prevent default handler and 
      // stop event bubbling
    });
     return true;
     // use 'return false;' if you need to prevent default handler and 
     // stop event bubbling
   });
  };
})(jQuery);

...
// using
(function ($) {
  $("#someDiv").longClick(function (e) { 
              alert($(e.target).attr("id") + " was clicked"); }, 
              1500);	
})(jQuery);

The plugin accepts a callback function that will be called once a long click event occurred and a timeout in milliseconds saying how long user should keep button pressed to produce the long click.

jQuery plugin to catch a taphold event

The same long click for iPad is usually called taphold and can be implemented as follows:

(function ($) {
  $.fn.taphold = function (callback, timeout) {
   // bind to element's touchstart event to track the taphold's beginning
   $(this).bind("touchstart", function (event) {
    // save the initial event object
    var initialEvent = event;
    // set the delay after which the callback will be called
    var timer = window.setTimeout(function () { callback(initialEvent); }, timeout);
    // bind to global touchend and touchcancel events for clearance
    $(document).bind("touchend touchcancel", function () {
      // clear timer
      window.clearTimeout(timer);
      // unbind from touchend and touchcancel events
      $(document).unbind("touchend touchcancel");                
      return true;
      // use 'return false;' if you need to prevent default handler and 
      // stop event bubbling
    });            
    return true;            
    // use 'return false;' if you need to prevent default handler and 
    // stop event bubbling
   });
  };
})(jQuery);

...
// using
(function ($) {
  $("#someDiv").taphold(function () { 
               alert($(e.target).attr("id") + " was tapholded"); }, 
               1500);
})(jQuery);

The only difference from the previous plugin is that touchable device’s events are used.

Combined jQuery plugin to catch both long click and taphold events

Two shown above plugins can be quite easily combined in one. The new plugin checks if the current device is an iPad and, if so, deals with such iPad events as touchstart, touchend and touchcancel; otherwise, it uses traditional mousedown and mouseup.

(function ($) {
 $.fn.longclick = function (callback, timeout) {
   var isIPad = $.isIPad();

   var startEvents = isIPad ? "touchstart" :           "mousedown";
   var endEvents   = isIPad ? "touchend touchcancel" : "mouseup";

   $(this).bind(startEvents, function (event) {
    // save the initial event object
    var initialEvent = event;
    // set delay after which the callback will be called
    var timer = window.setTimeout(function () { callback(initialEvent); }, timeout);
    // bind to global event(s) for clearance
    $(document).bind(endEvents, function () {
        // clear timer
        window.clearTimeout(timer);
        // reset global event handlers
        $(document).unbind(endEvents);
        return true;
        // use 'return false;' if you need to prevent default handler and 
        // stop event bubbling
    });
    return true;
    // use 'return false;' if you need to prevent default handler and 
    // stop event bubbling
   });
 };
})(jQuery);

...
// using
(function ($) {
    $("#someDiv").longclick(function () { 
             alert($(e.target).attr("id") + " was clicked"); }, 
             1500);
})(jQuery);

Note that the isIPad plugin was described in the post – jQuery: Plugins to detect iPad and iPhone devices.

Related posts:

• jQuery: Plugins to detect iPad and iPhone devices
• jQuery: IsNullOrEmpty plugin for jQuery

jQuery plugin for iPad detection

Below is a simple jQuery plugin to detect whether a page is opened in an iPad:

(function ($) {
    $.isIPad = function () {        
        return (typeof navigator != "undefined" && 
               navigator && navigator.userAgent && 
               navigator.userAgent.match(/iPad/i) != null);
    };
})(jQuery);

...
// using
$(function(){
    if($.isIPad())
        alert('Hello, iPad');
});

jQuery plugin for iPhone detection

The next plugin allows to detect an iPhone:

(function ($) {
    $.isIPhone = function () {
        if(!$.isIPad())
            return (typeof navigator != "undefined" && 
               navigator && navigator.userAgent && 
               (navigator.userAgent.match(/iPhone/i) != null || 
                navigator.userAgent.match(/iPod/i) != null));
        return false;        
    };
})(jQuery);

...
// using
$(function(){
    if($.isIPhone())
        alert('Hello, iPhone');
});

Note, initially I check if the device is an iPad and only then try to identify it as an iPhone. I do so because people reports that some iPad browsers/applications use substring ‘iPhone’ in their userAgents along with the expected ‘iPad’. For example, such behavior was noticed in Facebook UIWebView.

jQuery plugin for Apple mobile device detection

To detect any Apple mobile devices (iPad, iPhone or iPod) you can use the following jQuery plugin:

(function ($) {
    $.isAppleMobile = function () {
        return (typeof navigator != "undefined" && 
               navigator && navigator.userAgent && 
               navigator.userAgent.match(/(iPad|iPhone|iPod)/i) != null);
    };
})(jQuery);

...
// using
$(function(){
    if($.isAppleMobile())
        alert('Hello, Apple device');
});

Related posts:

• jQuery: Plugins to handle long click and taphold events
• jQuery: IsNullOrEmpty plugin for jQuery