Demo

Demos are largely unstyled to give developers a better idea of how the plugin can drop into a new or existing project.

Scale & Pan
<div class="touch_container">
	<div class="touch_target">Touch</div>
</div>
$(".touch_target").touch({
  pan: true,
  scale: true
}).on("panstart", function(e) {
  // Handle pan start
  // Cache positions, etc...
}).on("panend", function(e) {
  // Handle pan end
  // Clean up data...
}).on("pan", function(e) {
  var deltaX  = e.deltaX,
    deltaY  = e.deltaY;

  // React to pan...
}).on("scalestart", function(e) {
  // Handle scale start
  // Cache positions, etc...
}).on("scaleend", function(e) {
  // Handle touch end
  // Clean up data...
}).on("scale", function(e) {
  var scale   = e.scale,
    deltaX  = e.deltaX,
    deltaY  = e.deltaY;

  // React to scale and pan...
});
View All Demos

Using Touch

Main

touch.js

Dependencies

jQuery
core.js

Basic

Touch normalizes mouse and touch events in the context of a few basic gestures: pan, swipe and scale. It is up to the developer to utilize the events. Events emitted by Touch will contain the following extra properties:

Key Description
pageX Current X position
pageY Current Y position
deltaX Change in X position
deltaY Change in Y position
scale Current scale value
directionX Current X movement
directionY Current Y movement

Pan

Pan can be used for building touch-friendly draggable interfaces:

$(".target").touch({
  pan: true
}).on("panstart", function(e) {
  console.log("Started panning");
}).on("pan", function(e) {
  console.log("Panning");
}).on("panend", function(e) {
  console.log("Stopped panning");
});

Swipe

Swipe can be used for building touch-friendly swipable interfaces:

$(".target").touch({
  swipe: true
}).on("swipe", function(e) {
  console.log("Swiped");
});

Scale

Scale can be used for building touch-friendly scalable interfaces:

$(".target").touch({
  scale: true
}).on("scalestart", function(e) {
  console.log("Started scaling");
}).on("scale", function(e) {
  console.log("Scaling");
}).on("scaleend", function(e) {
  console.log("Stopped scaling");
});

Note: pan, swipe and scale can also be used together to create a rich interface.

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-touch-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

Name Type Default Description
axis string null Limit axis for pan and swipe; 'x' or 'y'
pan boolean false Pan events
scale boolean false Scale events
swipe boolean false Swipe events
threshold int 10 Touch threshold for single axis
time int 50 Touch time limit for single axis

Events

Events are triggered on the target instance's element, unless otherwise stated.

Event Description
panstart Panning started
pan Panning
panend Panning ended
scalestart Scaling started
scale Scaling
scaleend Scaling ended
swipe Swipe

Methods

Methods are publicly available to all active instances, unless otherwise stated.

defaults

Extends plugin default settings; effects instances created hereafter.

$.touch("defaults", { ... });

Parameters

Name Type Default Description
options object {} New plugin defaults

destroy

Removes plugin instance.

$(".target").touch("destroy");

CSS

Class Type Description
.fs-touch-element element Target Element