Hammer is a open-source JavaScript Library for adding touch gestures support that can recognize gestures made by touch, mouse and pointerEvents to any website so that users can interact with them easier on touch devices. It doesn’t have any dependencies, and it’s small, only 3.71 kB minified + gzipped<\/strong>!<\/p>\n It\u00a0supports tap, double tap, press, hold, drag, horizontal pan and swipe<\/em> and the multi-touch pinch and rotate recognizers and also transform<\/strong>.<\/p>\n It’s completely rewritten, with reusable gesture recognizers, and improved support for the recent mobile browsers by making use of the touch-action css property when possible. Also support for multiple Hammer instances the same time, so multi-user became possible.<\/p><\/blockquote>\n It’s easy to use, just include the library and create a new instance.<\/p>\n By default it adds a set of Enabling vertical or all directions for the Also the viewport meta tag is recommended, it gives more control back to the webpage by disableing the doubletap\/pinch zoom. More recent browsers that support the touch-action property don’t require this.<\/p>\n You can setup your own set of recognizers for your instance. This requires a bit more code, but it gives you more control about the gestures that are being recognized.<\/p>\n The example above creates an instance containing a If you want to recognize two gestures simultaneously, you can use the the Now Hammer is able to run pinch and rotate the same time. You can also separate them with the With the method Because multiple gestures can be recognized simultaneously and a gesture can be recognized based on the failure of other gestures. Multiple taps on the same element can be easily recognized on this way:<\/p>\n When a tap gesture requires a failure to be recognized, its recognizer will wait a short period to check that the other gesture has been failed. In this case, you should not assume that its tap gesture event will be fired immediately.<\/p>\n Vertical panning is used to scroll your page, and some (older) browsers don’t send events so Hammer isn’t able to recognize these gestures. An option would be to provide an alternative way to do the same action.<\/p>\n Sometimes Hammer just needs some fine-tuning, like the swipe velocity or some other thresholds. Also, for better performance on slower devices your should try to keep you callbacks as simple as possible.<\/p>\n IE10 and IE11 on Windows Phone have a small tap highlight when you tap an element. Adding this meta tag removes this.<\/p>\n Hammer is setting a property to improve the UX of the panning on desktop. Regularly, the desktop browser would select the text while you drag over the page. The If you care about the text-selection and not so much about the desktop experience, you can simply remove this option from the defaults. Make sure you do this before creating an instance.<\/p>\n Don’t worry if your browser or OS isn’t listed, it might work anyway! Internet Explorer 8 and older aren’t supported.<\/p>\n Browsers that have native support for touch-action might have an improved experience then the browsers that don’t.<\/p>\n All about hammer.js a start to touch gestures and multitouch Hammer is a open-source JavaScript Library for adding touch gestures support that can recognize gestures […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0},"categories":[7,6],"tags":[],"_links":{"self":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts\/701"}],"collection":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/comments?post=701"}],"version-history":[{"count":2,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts\/701\/revisions"}],"predecessor-version":[{"id":704,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts\/701\/revisions\/704"}],"wp:attachment":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/media?parent=701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/categories?post=701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/tags?post=701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Getting Started<\/h2>\n
\n
\n
What’s new in 2.0?<\/h5>\n
\nUsage<\/h3>\n
var hammertime = new Hammer(myElement, myOptions);\r\nhammertime.on('pan', function(ev) {\r\n console.log(ev);\r\n});\r\n<\/code><\/pre>\ntap<\/code>, doubletap<\/code>, press<\/code>, horizontal<\/em> pan<\/code> and swipe<\/code>, and the multi-touch pinch<\/code> and rotate<\/code> recognizers. The pinch and rotate recognizers are disabled by default because they would make the element blocking, but you can enable them by calling:<\/p>\nhammertime.get('pinch').set({ enable: true });\r\nhammertime.get('rotate').set({ enable: true });\r\n<\/code><\/pre>\npan<\/code> and swipe<\/code> recognizers:<\/p>\nhammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });\r\nhammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });\r\n<\/code><\/pre>\n<meta name=\"viewport\" content=\"user-scalable=no, width=device-width,\r\n initial-scale=1, maximum-scale=1\">\r\n<\/code><\/pre>\nMore control<\/h3>\n
var mc = new Hammer.Manager(myElement, myOptions);\r\n\r\nmc.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL, threshold: 0 }) );\r\nmc.add( new Hammer.Tap({ event: 'quadrupletap', taps: 4 }) );\r\n\r\nmc.on(\"pan\", handlePan);\r\nmc.on(\"quadrupletap\", handleTaps);\r\n<\/code><\/pre>\npan<\/code> and a quadrupletap<\/code> gesture. The recognizer instances you create a being executed in the order they are added, and only one can be recognized at the time.<\/p>\nSimultaneous recognizing<\/h3>\n
recognizeWith()<\/code> method. The example below does this with the pinch and rotate recognizers, which will improve usability.<\/p>\nvar pinch = new Hammer.Pinch();\r\nvar rotate = new Hammer.Rotation();\r\npinch.recognizeWith(rotate);\r\n<\/code><\/pre>\ndropRecognizeWith()<\/code> method on the recognizer instance.<\/p>\nRequire failure of an other recognizer<\/h3>\n
requireFailure()<\/code> you can let a recognizer require the failure of an other recognizer before recognizing. This could become useful when you want to nest two gestures, like pan-horizontal and pan-vertical. Removing the dependency could be done with the dropRequireFailure()<\/code> method.<\/p>\nvar horizontal = new Hammer.Pan({\r\n event: 'panh',\r\n direction: Hammer.DIRECTION_HORIZONTAL\r\n});\r\nvar vertical = new Hammer.Pan({\r\n event: 'panv',\r\n direction: Hammer.DIRECTION_VERTICAL\r\n});\r\nvertical.requireFailure(horizontal);\r\n<\/code><\/pre>\nUsing requireFailure to recognize multiple taps<\/h3>\n
var hammer = new Hammer(el, {});\r\n\r\nvar tap = new Hammer.Tap();\r\nvar doubleTap = new Hammer.Tap({event: 'doubleTap', taps: 2 });\r\nvar tripleTap = new Hammer.Tap({event: 'tripleTap', taps: 3 });\r\n\r\nhammer.add([tripleTap, doubleTap, tap]);\r\n\r\ntripleTap.recognizeWith([doubleTap, tap]);\r\ndoubleTap.recognizeWith(tap);\r\n\r\ndoubleTap.requireFailure(tripleTap);\r\ntap.requireFailure([tripleTap, doubleTap]);\r\n<\/code><\/pre>\nTips ‘n Tricks<\/h1>\n
Try to avoid vertical pan\/swipe<\/h3>\n
Test on a real device<\/h3>\n
Remove tap highlight on Windows Phone<\/h3>\n
<meta name=\"msapplication-tap-highlight\" content=\"no\" \/>\r\n<\/code><\/pre>\n“I can’t select my text anymore!”<\/h3>\n
user-select<\/code> css property disables this.<\/p>\ndelete Hammer.defaults.cssProps.userSelect;\r\n\r\n\r\n<\/code><\/pre>\nBrowser\/device support<\/h1>\n
\n\n
\n \nBrowser<\/th>\n Pan<\/th>\n Pinch<\/th>\n Press<\/th>\n Rotate<\/th>\n Swipe<\/th>\n Tap<\/th>\n Multi-user<\/th>\n Touch-action<\/th>\n<\/tr>\n<\/thead>\n \n Windows Phone 8 – IE10<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n<\/tr>\n \n Android 2.3 – browser<\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n \u2665<\/td>\n <\/td>\n <\/td>\n<\/tr>\n \n Android 2.3 – FireFox<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n <\/td>\n<\/tr>\n \n Android 4.x – browser<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n <\/td>\n<\/tr>\n \n Android 4.4 – browser<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n<\/tr>\n \n Android 4 – Chrome<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n<\/tr>\n \n Android 4 – Opera<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n ?<\/td>\n<\/tr>\n \n Android 4 – FireFox<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n <\/td>\n<\/tr>\n \n Android 4 w\/ mouse<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n n\/a<\/td>\n<\/tr>\n \n iOS 6<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n <\/td>\n<\/tr>\n \n iOS 7<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n <\/td>\n<\/tr>\n \n BlackBerry 10<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n ?<\/td>\n ?<\/td>\n<\/tr>\n \n FireFox OS (simulator)<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n ?<\/td>\n ?<\/td>\n<\/tr>\n \n Desktop – IE11<\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n<\/tr>\n \n Desktop – IE10<\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n<\/tr>\n \n Desktop – IE9<\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n \u2665<\/td>\n <\/td>\n <\/td>\n<\/tr>\n \n Desktop – Chrome<\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n<\/tr>\n \n Desktop – Firefox<\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n \u2665<\/td>\n <\/td>\n <\/td>\n<\/tr>\n \n Desktop – Opera<\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n \u2665<\/td>\n <\/td>\n ?<\/td>\n<\/tr>\n \n Chromebook<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n ?<\/td>\n<\/tr>\n \n Windows 8 \/w pen<\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n n\/a<\/td>\n<\/tr>\n \n Windows 8 \/w touch<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n n\/a<\/td>\n<\/tr>\n \n Windows 8 \/w mouse<\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n <\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n n\/a<\/td>\n<\/tr>\n \n Windows 8 \/w mixed<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n \u2665<\/td>\n n\/a<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"