4

I'm having issues finding / figuring out how to add options to hammer.js when using it's jQuery plugin. This is how I initiate hammer:

            /* Create Hammer object for swipable game cards */
            $('.game-card-mobile')
            .hammer()
            .bind('swiperight swipeleft press', function(ev) {
              console.log(ev.type);
            });

I find it that in order for swipe action to be performed a relatively fast swipe needs to occur, I want to decrease speed of swipe required to fire the event. After reading through the docs: http://hammerjs.github.io/recognizer-swipe/ There seems to be a velocity option that defaults to 0.65, so I assume this can be changed somehow to lets say 0.5 in order to fire event on slower swipes?

EDIT: if this would be of any help here are some examples of tests for swipe written in javascript: https://github.com/hammerjs/hammer.js/blob/master/tests/unit/gestures/test_swipe.js
this shows example of how {threshold: 1} is set, I'm trying to achieve this while using jQuery plugin.

2 Answers 2

8

The link you post, is from a library Called Hammer.js. You must import this library in your project to make it work.

Minimal velocity required before recognizing, unit is in px per ms as they say, then it´s 0.65px each millisecond, then making it 0.50 should make the event occur with less velocity in the touch.

0.50 -> will fire before

0.80 -> more difficult to fire

var hammertime = new Hammer(myElement, myOptions);
hammertime.on('swipe', function(ev) {
    alert(ev);
});

hammertime.get('swipe').set({ velocity: 0.80});

Is maybe the right way?

Hoy it helps you.


Edit: As said in the jquery api page: The Hammer instance is stored at $element.data("hammer").

Then maybe

$("#yourdivtoswipe_id").data('hammer').get('swipe').set({ velocity: 0.80});

Regards

4
  • yes, it is indeed from that library, I updated the title. What you posted is also the right way showed in the examples, however I'm trying to figure out how to add options via their jQuery plugin which uses .hammer() instead of new Hammer()..
    – Ilja
    Apr 14, 2015 at 11:34
  • i supose the hammertime.get('swipe').set({ velocity: 0.80}); will modify all the swipe events the library manages, Itn´t that? Apr 14, 2015 at 12:10
  • I tried that, but am getting 'Uncaught TypeError: Cannot read property 'set' of undefined'
    – Ilja
    Apr 14, 2015 at 12:51
  • Then that means hammertime.get('swipe') is null. Why don´t you make a text search by "new Hammer" in all your app to see which one is the object created for that? maybe the name is not hammertime. If you don´t have a Hammer created, you´ll need to create a new one. --EDIT-- I´ve just read about the jquery plugin you said. they say: The Hammer instance is stored at $element.data("hammer"). Then maybe $("#yourdivtoswipe_id").data("hammer).get('swipe').set({ velocity: 0.80}); Apr 14, 2015 at 13:43
1

This is how:

$("#yourelemenet").hammer({options}).bind("tap", function(ev) {});

note the options object. Here is a quick example from some of my code:

$("#yourelemenet").hammer({threshold: 10, posThreshold:50, time:1000}).bind("tap", function(ev) {});

edit: add velocity where your see threshold, posThreshold, time above..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.