New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pinch-to-zoom and mousewheel #256

Closed
hotzenklotz opened this Issue Apr 22, 2013 · 3 comments

Comments

Projects
None yet
4 participants
@hotzenklotz

hotzenklotz commented Apr 22, 2013

Hi,

is there any way I can use the pinch-to-zoom gesture event handler on mobile devices for zooming and have Hammer automatically trigger the same behavior with the mouse wheel on desktops?

Regards,

Tom

@jtangelder

This comment has been minimized.

Show comment
Hide comment
@jtangelder

jtangelder Apr 22, 2013

Member

you could write a plugin for the transform gesture, doing something like this, but then you need to recalculate the scale factor,

hammertime.on("mousewheel", function(ev) { 
   // create some hammerisch eventData
   var eventData = Hammer.event.collectEventData(this, 'scroll', ev);

   // you should calculate the zooming over here, 
   // should be something like wheelDelta * the current scale level, or something...
   eventData.scale = ev.wheelDelta;

   // trigger transform event
   hammertime.trigger("transform", eventData);

  // prevent scrolling
  ev.preventDefault();
});
Member

jtangelder commented Apr 22, 2013

you could write a plugin for the transform gesture, doing something like this, but then you need to recalculate the scale factor,

hammertime.on("mousewheel", function(ev) { 
   // create some hammerisch eventData
   var eventData = Hammer.event.collectEventData(this, 'scroll', ev);

   // you should calculate the zooming over here, 
   // should be something like wheelDelta * the current scale level, or something...
   eventData.scale = ev.wheelDelta;

   // trigger transform event
   hammertime.trigger("transform", eventData);

  // prevent scrolling
  ev.preventDefault();
});

@jtangelder jtangelder closed this Apr 23, 2013

@josdejong

This comment has been minimized.

Show comment
Hide comment
@josdejong

josdejong Jan 14, 2014

The signature of the function Hammer.event.collectEventData is changed since v1.0.6. The following worked for me:

hammertime.on("mousewheel", function(ev) { 
   // create some hammerisch eventData
   var eventType = 'scroll';
   var touches   = Hammer.event.getTouchList(ev, eventType);
   var eventData = Hammer.event.collectEventData(this, eventType, touches, ev);

   // you should calculate the zooming over here, 
   // should be something like wheelDelta * the current scale level, or something...
   eventData.scale = ev.wheelDelta;

   // trigger transform event
   hammertime.trigger("transform", eventData);

  // prevent scrolling
  ev.preventDefault();
});

josdejong commented Jan 14, 2014

The signature of the function Hammer.event.collectEventData is changed since v1.0.6. The following worked for me:

hammertime.on("mousewheel", function(ev) { 
   // create some hammerisch eventData
   var eventType = 'scroll';
   var touches   = Hammer.event.getTouchList(ev, eventType);
   var eventData = Hammer.event.collectEventData(this, eventType, touches, ev);

   // you should calculate the zooming over here, 
   // should be something like wheelDelta * the current scale level, or something...
   eventData.scale = ev.wheelDelta;

   // trigger transform event
   hammertime.trigger("transform", eventData);

  // prevent scrolling
  ev.preventDefault();
});
@Baccanno

This comment has been minimized.

Show comment
Hide comment
@Baccanno

Baccanno Mar 14, 2014

With the Jquery plugin how do you get the hammer instance out of a selector scope ?

Baccanno commented Mar 14, 2014

With the Jquery plugin how do you get the hammer instance out of a selector scope ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment