Section 10: Browser and Mobile Support
Here we will look into checking for features supported by our browser, as well as handling mobile events in case our plugins are used on mobile devices.
In some of our plugins, we’ll want to check for support for certain features that may vary depending on the browser and version being used. In the past, a common way to do this was to check for the browser type and version and limit features accordingly.
However, newer techniques avoid this mess and just go ahead and check for specific CSS, HTML or JavaScript features directly. We won’t get into details on how to test each feature, as some may be more difficult to test than others. But a quick search on Google or StackOverflow is a good place to start. Another good source that also includes a library you can use to test features can be found at http://modernizr.com.
For now, we’ll just get into how to set things up in a clean and elegant way for our plugin. The nice thing is that jQuery already ships with a $.support object that it uses for internal purposes. The best way to see what checks are included with your version of jQuery is to simply log it and see for yourself:
console.log($.support);
We can piggyback on the $.support object and use it to add our own support variables. Here are a couple of examples:
$.support.canvas = (document.createElement('canvas')).getContext ? true : false;
$.support.placeholder = 'placeholder' in document.createElement('input'),
(Online: http://jsfiddle.net/8E6kr/)
The first one checks to see if the browser supports the canvas element. The second line checks if the browser supports the placeholder attribute for input and textarea elements.
We can then add the check for this just above our plugin’s function assignment:
(function ($) {
'use strict';
// Code here...
$.support.canvas = (document.createElement('canvas')).getContext ? true : false;
$.fn.wPaint = function () {
// Code here...
};
})(jQuery);
If you’re building a plugin specifically for mobile, then you might want to make jQuery mobile a dependency. However, if you’re just building a more universal plugin that might also be used on mobile devices, then we will need to map some events to our more common mouse events.
Here is a battle-tested piece of code that I use in my new plugins:
$.fn.bindMobileEvents = function () {
$(this).on('touchstart touchmove touchend touchcancel', function () {
var touches = (event.changedTouches || event.originalEvent.targetTouches),
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, null
);
first.target.dispatchEvent(simulatedEvent);
});
};
(Online: http://jsfiddle.net/EL4gc/)
As you can see, it’s not doing anything fancy. It’s just mapping events from our touch interface to our mouse events.
One thing to note is the preventDefault() on the touchmove event. This is important because any kind of dragging in mobile devices would engage the scroll bars or other swiping features that may exist. This is particularly important if your plugin is performing any kind of “drag and drop” action or drawing on the screen.
This section covered some important topics related to supporting plugins on mobile devices, and the ability to check support for specific features. Implementing these techniques polishes our plugins and helps make them available on a wider variety of devices.