7/18/12

EightMedia/hammer.js GitHub

Signup and Pricing Explore GitHub Features Blog Sign in Watch2,120 Fork152

public EightMedia / hammer.js

Code Network Pull Requests 2 Issues 19 Wiki Graphs JavaScript 1. JavaScript 100% A javascript library for multi-touch gestures :// You can touch this Read more http://eightmedia.github.com/hammer.js/ Clone in Windows ZIP HTTP Git Read-Only
https://github.com/EightMedia/hammer.js.git

Read-Only access Tags 0 Downloads 0 branch: master Switch branches/tags

Filter branches/tags

Branches
https://github.com/eightmedia/hammer.js 1/10

7/18/12

EightMedia/hammer.js GitHub

Tags Nothing to show gh-pages master Files Commits Branches 2 Latest commit to the master branch Merge pull request #38 from jedahan/master
Iiilpcaejo frhme.s nta akg.sn o amrj

commit bd3d7bbbfc jtangelder authored 14 days ago hammer.js / history message demo a month ago added query special event file [dantipa] .gitignore 5 months agoinitial files [jtangelder] LICENSE 4 months agorestored license [jtangelder] README.md a month ago added swipe event in the docs [jtangelder] hammer.js a month ago fix to see touch amount for touchend [dantipa] jquery.hammer.js 2 months agoadded swipe event [jtangelder] jquery.specialevent.hammer.jsa month ago wrong url [dantipa] package.json a month ago update to correct version number [jedahan] README.md name age

Hammer.js A javascript library for multi-touch gestures

I told you, homeboy / You CAN touch this / Yeah, that's how we living and you know / You CAN touch this Hammer.js is a javascript library that can be used to control gestures on touch devices. It supports the following gestures: Tap Double tap Hold Drag
https://github.com/eightmedia/hammer.js 2/10

7/18/12

EightMedia/hammer.js GitHub

Swipe Transform (pinch)

Demo's
While it's rollin', hold on / Pump a little bit and let 'em know it's goin' on / Like that, like that We've created some demo's to show you the immense power of hammer.js:

Basic demo
A simple demo that demonstrates that hammer.js works and is able to recognize gestures. We output the gestures that are recognized. Check it out

Slideshow
A slideshow that uses hammer.js to switch slides. Note that the drag event in the slideshow is non-blocking for the scrolling of the page. Check it out

Scroll content
A touch-scrollable div. Check it out

Drag
Move boxes around. Check it out

Color traces
We use hammer.js to generate beautiful traces with colorful balls. Balls! Check it out

Pinch to zoom
We use hammer.js to zoom in and out on an image by pinching. Check it out Also take a look at the demo of Maros Hluska Check it out

Momentum
Simulate the drag/throw experience on iOS/Android. Try it

Sites using Hammer.js

Eight Media Want to add your site? Contact me at Twitter
https://github.com/eightmedia/hammer.js 3/10

7/18/12

EightMedia/hammer.js GitHub

Documentation
So wave your hands in the air / Bust a few moves / Run your fingers through your hair A step by step guide on how to use hammer.js: Download the hammer javascript or clone the latest version from our github repository:
$gtcoegtgtu.o:ihmdahme.sgt i ln i@ihbcmegtei/amrj.i

Import jquery and import hammer.js in your project:

<citsc"tp/egtei.ihbcmhme.shme.s>/cit srp r=ht:/ihmdagtu.o/amrj/amrj"<srp>

Hammertime! Bind hammer to a container element:

vrhme =nwHme(ouetgtlmnBI(cnanr); a amr e amrdcmn.eEeetyd"otie")

Now, on every gesture that is performed on the container element, you'll receive a callback object with information on the gesture.
hme.nrgtr =fnto(v {} amrodasat ucine) ; hme.nrg=fnto(v {} amroda ucine) ; hme.nrgn =fnto(v {} amrodaed ucine) ; hme.nwp =fnto(v {} amrosie ucine) ; hme.na =fnto(v {} amrotp ucine) ; hme.nobea =fnto(v {} amrodultp ucine) ; hme.nod=fnto(v {} amrohl ucine) ; hme.nrnfrsat=fnto(v {} amrotasomtr ucine) ; hme.nrnfr =fnto(v {} amrotasom ucine) ; hme.nrnfred=fnto(v {} amrotasomn ucine) ; hme.nees =fnto(v {} amrorlae ucine) ;

A jQuery plugin is also available and can be found in this repos.

<citsc"tp/egtei.ihbcmhme.sjur.amrj"<srp> srp r=ht:/ihmdagtu.o/amrj/qeyhme.s>/cit $"eeet) (#lmn" .amr{ hme( / otos. / pin.. } ) .id"a" fnto(v { bn(tp, ucine) cnoelge) osl.o(v; }; )

Brian Rinaldi has written a blogpost about Hammer.js, it explains things a bit more and has a nice looking demo. Read it here.

The Hammer callback objects:

https://github.com/eightmedia/hammer.js 4/10

7/18/12

EightMedia/hammer.js GitHub

All gestures return: originalEvent: The original DOM event. position: An object with the x and y position of the gesture (e.g. the position of a tap and the center position of a transform). touches: An array of touches, containing an object with the x and the y position for every finger. Besides these, the Transform gesture returns: scale: The distance between two fingers since the start of an event as a multiplier of the initial distance. The initial value is 1.0. If less than 1.0 the gesture is pinch close to zoom out. If greater than 1.0 the gesture is pinch open to zoom in. rotation: A delta rotation since the start of an event in degrees where clockwise is positive and counterclockwise is negative. The initial value is 0.0. The Drag and Swipe gesture also returns: angle: The angle of the drag movement, where right is 0 degrees, left is -180 degrees, up is -90 degrees and down is 90 degrees. This picture makes this approach somewhat clearer direction: Based on the angle, we return a simplified direction, which can be either up, right, down or left. distance: The distance of the drag in pixels. distanceX: The distance on the X axis of the drag in pixels. distanceY: The distance on the Y axis of the drag in pixels. In addition to this the Transform and Drag gestures return start and end events.

Defaults
default prevent_default css_hacks drag drag_vertical drag_horizontal drag_min_distance swipe swipe_time swipe_min_distance transform scale_treshold rotation_treshold tap false true true true true 20 true 200 20 true 0.1 15 true
5/10

when true all default browser actions are blocked. For instance if you want to drag vertically, try setting this to true. css userSelect, touchCallout, userDrag, tapHighlightColor are added

pixels max ms of movement minimal movement how much scaling needs to be done before firing the transform event degrees before firing the transform event

https://github.com/eightmedia/hammer.js

7/18/12

EightMedia/hammer.js GitHub

tap_double

true ms pixels, distance between taps ms

tap_max_interval 300 tap_double_distance: 20 hold hold_timeout true 500

Compatibility
Tap Double Tap Hold Drag Transform Windows Internet Explorer 8 Internet Explorer 9 OSX Firefox 11 Opera 11 Chrome 16 Safari 5 iOS iPad iOS 5 iPhone iOS 5 Android 4 Default browser Android 3 Default browser Android 2 Default browser Firefox 10 Opera Mobile 12 Opera Mini 6.5 Opera Mini 7.0 Others Windows Phone 7.5 X Kindle Fire X Nokia N900 - Firefox 1.1 X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X

On a desktop browser the mouse can be used to simulate touch events with one finger. On Android 2 (and 3?) doesn't support multi-touch events, so there's no transform callback on these Android versions. Firefox 1.1 (Nokia N900) and Windows Phone 7.5 doesnt support touch events, and mouse events are badly supported.
https://github.com/eightmedia/hammer.js 6/10

7/18/12

EightMedia/hammer.js GitHub

Not all gestures are supported on every device. This matrix shows the support we have tested. This is ofcourse far from extensive. If you've tested hammer.js on a different device, please let us know.

Further notes
Created by Jorik Tangelder and developed further by everyone at Eight Media in Arnhem, the Netherlands. Add your feature suggestions and bug reports on Github. We recommend listening to this loop while using hammer.js.

GitHub Links GitHub About Blog Features Contact & Support Training GitHub Enterprise Site Status Clients GitHub for Mac GitHub for Windows GitHub for Eclipse GitHub Mobile Apps Tools Gauges: Web analytics Speaker Deck: Presentations Gist: Code snippets Extras Job Board GitHub Shop The Octodex

https://github.com/eightmedia/hammer.js

7/10

7/18/12

EightMedia/hammer.js GitHub

Documentation GitHub Help Developer API GitHub Flavored Markdown GitHub Pages Terms of Service Privacy Security 2012 GitHub Inc. All rights reserved. Powered by the Dedicated Servers and Cloud Computing of Rackspace Hosting

Markdown Cheat Sheet

Format Text
Headers
#Ti i a <1 tg hs s n h> a # Ti i a <2 tg # hs s n h> a ### Ti i a <6 tg ### hs s n h> a

Text styles
*hstx wl b iai* Ti et il e tlc _hswl as b iai_ Ti il lo e tlc *Ti tx wl b bl* *hs et il e od* _Ti wl as b bl_ _hs il lo e od_ *o *cn*cmiete* Yu *a* obn hm

Lists
Unordered
*Ie 1 tm *Ie 2 tm *Ie 2 tm a *Ie 2 tm b

Ordered
1 Ie 1 . tm 2 Ie 2 . tm 3 Ie 3 . tm
https://github.com/eightmedia/hammer.js 8/10

7/18/12

EightMedia/hammer.js GitHub

*Ie 3 tm a *Ie 3 tm b

Miscellaneous
Images
!Gtu Lg]/mgslg.n) [iHb oo(iae/oopg Fra:!AtTx]ul omt [l et(r)

Links
ht:/ihbcm-atmtc tp/gtu.o uoai! [iHb(tp/gtu.o) Gtu]ht:/ihbcm

Blockquotes
A KneWs si: s ay et ad >W'elvn teftr s er iig h uue o >tepeeti orps. h rsn s u at

Code Examples in Markdown

Syntax highlighting with GFM
``aacit `jvsrp fnto fnylr(r){ ucin acAetag i(r){ fag $fcbx{i:#o') .aeo(dv'fo} } } `` `

Or, indent your code 4 spaces

Hr i aPto cd eape ee s yhn oe xml wtotsna hglgtn: ihu ytx ihihig dffo e o: i ntbr f o a: rtr tu eun re

Inline code for comments

Itikyusol uea hn o hud s n `ad> eeethr ised <dr` lmn ee nta.

Something went wrong with that request. Please try again. Dismiss

Looking for the GitHub logo?

https://github.com/eightmedia/hammer.js 9/10

7/18/12

EightMedia/hammer.js GitHub

GitHub Logo

Download The Octocat

Download

https://github.com/eightmedia/hammer.js

10/10