Touch to mouse converter and callbacks for touch and pinch events
- X, Y coordinates for touch events
- Scale for Pinch events
- Convert touch events to mouse events (move and click)
This easy to use jQuery Plugin is based on a 360 Zoom Plugin I wrote to work on desktop and mobile devices, I have pulled the mobile elements in to this Plugin.
I have hosted the jQuery Plugin for Touch events in Git Hub.
This includes two examples:
X, Y, Scale Callback Example
Demo 1: touchit-demo.htm
This shows the call backs from the TouchIt plugin:
The plugin will call back to the functions passed as parameters.
When a single finger is touched, the X, Y coordinates are returned to the caller.
When a single finger is moved, the X, Y coordinates are returned to the caller for each movement.
When a single finger is lifted, the X, Y coordinates are returned to the caller.
When two fingers are moved, the Scale is returned to the caller (1 = original position, > 1 = fingers move apart, < 1 fingers move together).
HTML
<span id="touched" style="width:10px;height:10px; ">Touch and pinch the blue square...</span>
<div id="touch" style="width:250px;height:250px;background: blue; "></div>
JavaScript
$( "#touch" ).touchit({
onTouchStart: function (x, y) {
$("#touched").text('Touch Start ' + x + ':' + y);
},
onTouchMove: function (x, y) {
$("#touched").text("Touch Move " + x + ':' + y);
},
onTouchEnd: function (x, y) {
$("#touched").text("Touch End " + x + ':' + y);
},
onPinch: function (scale) {
$("#touched").text("Pinch " + scale);
}
});
Convert touch events to Mouse events
This shows how the TouchIt plugin can be used to convert touch events in to mouse events.
In the example you will see how the jQuery UI Slider can be extended with a simple call to the TouchIt Plugin to allow for control from a mobile device.
The only change needed to add mobile functionality is to add the .touchit() code to the slider:
HTML
<div id='zoomSlider'></div>
JavaScript
$( "#zoomSlider" ).slider({
orientation: "vertical",
min: 0,
max: 100
}).touchit();
Where else can I use the TouchIt Plugin?
If your site has some functionality that doesn't currently work for mobile, you should be able to add the TouchIt Plugin to the DIV or other element on the page and get the feedback from the touch events. See Demo 1 above how to implement this - you do not need to add the call backs.
Supported devices
This is written to pick up the ontouchstart event detection. I have tested it on iPhone, iPad and Andriod devices. As other devices come along that support this they will 'just work'.
The pinch callback works for iPhone and iPad, I don't believe it works for Android yet, although I'm interested to hear from your if you know.
Thanks for looking.
