Permalink
Browse files

improvements of readme

  • Loading branch information...
1 parent f05b448 commit c2534426e86f094d23d082aa9cf14e2327da6b26 @erwinelling erwinelling committed Mar 20, 2012
Showing with 35 additions and 55 deletions.
  1. +35 −55 README.md
View
@@ -1,13 +1,13 @@
# Hammer.js
-Hammer.js is a javascript object that can be used to control gestures on touch devices.
+## An easy-to-use 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 supports the following gestures:
+Hammer.js is a javascript library (that depends on jQuery) that can be used to control gestures on touch devices. It supports the following gestures:
- Tap
- Double tap
@@ -16,64 +16,54 @@ Hammer.js supports the following gestures:
- Transform
## Documentation
-A step by step guide on how to use hammer.
-
> So wave your hands in the air /
> Bust a few moves /
> Run your fingers through your hair
-1. [Download the hammer javascript] or clone the latest version from our github repository:
+A step by step guide on how to use hammer.js:
+
+* [Download the hammer javascript] or clone the latest version from our github repository:
```$ git clone git@github.com:jtangelder/hammer.js.git```
-2. Import jquery and import hammer.js in your project:
+* Import jquery and import hammer.js in your project:
```<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="hammer.js"></script>```
-3. Hammertime! Bind hammer to a container element:
+* Hammertime! Bind hammer to a container element:
-```Code example. { blabla }```
+```var hammer = new Hammer("#container");```
Now, on every gesture that is performed on the container element, you'll receive a callback object with information on the gesture.
-### The Hammer callback object:
+### The Hammer callback objects:
-Tap, Hold and Double Tap events return:
+All gestures return:
-- Event
-- Position
-- Touches
+- Event: The original jQuery event (targetElement, etc.).
+- 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.
-Transform event returns:
+Besides these, the Transform gesture also returns:
-- Event
-- Position
-- Touches
-- Scale
-- Rotation
+- 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 counter-clockwise is negative. The initial value is 0.0.
-Drag event returns:
+The Drag gesture also returns:
-- Event
-- Position
-- Touches
-- Direction
-- Distance
-- Angle
+- Direction: up|right|down|left
+- Distance: An …
+- Angle: The angle of the drag movement in degrees (up = 360/0, right = 90, down = 180, left = 270)
Something about start and end events?
-### More examples
-
-Please view the source code of our demo's for more examples.
-
### Requirements and compatibility
Hammer.js requires jQuery for simple event binding and for the position of the container element.
Hammer.js has been tested on iPad1 with iOS5, iPhone4 with iOS5, Samsung Galaxy S with Android 2.3.3 and Google Chrome 17. On a desktop browser the mouse can be used to simulate touch events with one finger. On Android 2 (and 3?) the default browser doesn't support multi-touch events, so there's no transform callback on Android.
-Not all gestures are supported on every device. This support matrix shows the support we have tested. Note that this is not extensive. If you've tested hammer.js on a different device, please let us know.
+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.
| *Gesture/ Device* | iPad iOS5 | iPhone iOS5 | Android 2.2.3 | ? |
|:-----------|:--------:|:---------|:---------|:--|
@@ -85,42 +75,32 @@ Not all gestures are supported on every device. This support matrix shows the su
## Demo's
-We've created some demo's to show you the power of hammer.js.
-
> While it's rollin', hold on /
> Pump a little bit and let 'em know it's goin' on /
> Like that, like that
-### Basic Demo
-A very simple demo that demonstrates that hammer.js works and is able to recognize gestures. We output the gestures that are recognized.
-/ Insert link here /
+We've created some demo's to show you the immense power of hammer.js:
-### Slideshow
-A simple slideshow that uses hammer to switch slides. Note that the drag event in the slideshow is non-blocking for the scrolling of the page.
-/ Insert link here /
+### 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: http://jtangelder.github.com/hammer.js/demo.html]
-### Zoom and Scroll
-We use hammer to zoom in on an image by pinching and scrolling it by dragging.
-/ Insert link here /
+### Slideshow
+A slideshow that uses hammer to switch slides. Note that the drag event in the slideshow is non-blocking for the scrolling of the page. [Check it out: http://jtangelder.github.com/hammer.js/demo.html]
-### Videoplayer / Google maps threshold
-/ Insert explanation and link here /
+### Colors!
+kleurenbolletjes
-### Pagination
-Unsure whether we'll finish this
-/ Insert explanation and link here /
+### Pinch to zoom
+We use hammer to zoom in and out on an image by pinching. [Check it out: http://jtangelder.github.com/hammer.js/demo.html]
### Lightbox
-Unsure whether we'll finish this
-/ Insert explanation and link here /
-
-### Scrub video
-Unsure whether we'll finish this
-/ Insert explanation and link here /
+We use hammer.js to close a lightbox by pinching it. [Check it out: http://jtangelder.github.com/hammer.js/demo.html]
+### Videoplayer / Google maps threshold
+We use hammer.js to differentiate between an intentional interaction with a videoplayer or a google maps element and i.e. a scroll gesture. Without this differentiation it's easy to get stuck in such an element, especially when it takes up a large part of your browser window. [Check it out: http://jtangelder.github.com/hammer.js/demo.html]
## Further notes
-Created by [J. Tangelder] and developed furher by everyone at [Eight Media] in Arnhem.
+Created by [J. Tangelder] and developed further by everyone at [Eight Media] in Arnhem, the Netherlands.
Add your feature suggestions and bug reports on [Github].
@@ -129,6 +109,6 @@ We recommend listening to [this loop] while using hammer.js.
[Download]: https://github.com/jtangelder/hammer.js/zipball/master
[eight media]: http://www.eight.nl/
[j. tangelder]: http://twitter.com/jorikdelaporik
- [github]: http://github.com/jtangelder/...
+ [github]: http://github.com/jtangelder/hammer.js/issues
[this loop]: http://soundcloud.com/eightmedia/ace-of-speights

0 comments on commit c253442

Please sign in to comment.