Questions tagged [hammer.js]
Hammer is an open-source library that can recognize gestures made by touch, mouse and pointerEvents. It has support for multiple instances the same time, so you can start creating multi-user touch interfaces.
hammer.js
59
questions
285
votes
8
answers
400k
views
Consider marking event handler as 'passive' to make the page more responsive
I am using hammer for dragging and it is getting choppy when loading other stuff, as this warning message is telling me.
Handling of 'touchstart' input event was delayed for X ms due to
main ...
- 34.7k
106
votes
10
answers
87k
views
Angular - 'Could not find HammerJS'
I'm working on a simple angular project where I am trying to import Material Design into my project but some of the components aren't working properly and a console warning says:
Could not find ...
- 8,301
42
votes
5
answers
62k
views
Pinch to zoom using Hammer.js
I am trying to implement pinch to zoom using hammer.js
Here's my HTML-
<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.min.js"></script>
<div id="pinchzoom">
...
- 2,241
12
votes
6
answers
27k
views
Using mobile events in Angular2
I was wondering if I could get some help in regards to events for mobile devices. I was looking around for a way to bind functions to swipe events in Angular 2. I saw in this this issue on Github that ...
- 301
8
votes
3
answers
6k
views
Javascript touch movement, track when user swipes from edges
I need to track user touch events. I want to track when user swipes from edges.
For example when user swipes from left vertical edge I will show a menu, from right edge make an alert, and show another ...
- 33.8k
6
votes
4
answers
16k
views
Configure Hammerjs events with angular2
How can I configure hammerjs events in angular2?
To use hammerjs events with angular2 I just have to include events on my html like this:
<div (press)="onLongPress($event)"></div>
In ...
- 61
17
votes
2
answers
13k
views
hammer.js object has no method addEventListener
I am getting the Error: Uncaught TypeError: Object [object Object] has no method 'addEventListener' hammer.js:168
my code is like this:
<script type="text/javascript" src="js/hammer.js"></...
- 443
12
votes
4
answers
27k
views
How to use hammer.js with Angular.js
I'm new with Angular.js and reading i know angular dont have events like tap, double tap, etc. I'm trying to combine with Hammer.js without success.
Code from gist
/**
* angular-hammer.js
* ...
- 18k
6
votes
1
answer
4k
views
Hammer JS not working with backbone
I'm trying to get hammer js events working with backbone but can't get it to respond to events.
I've tried the following already..
http://cijug.net/tech/2013/01/16/backbone-hammer/
https://gist....
- 6,874
5
votes
2
answers
15k
views
Removing hammer events
I create an event using hammer.js library like this:
Hammer(myElement).on("doubletap", function(evt){
evt.preventDefault();
});
How can I then remove the registred event? Can I ...
- 3,870
2
votes
4
answers
7k
views
Hammer.js can't remove event listener
I create a hammer instance like so:
var el = document.getElementById("el");
var hammertime = Hammer(el);
I can then add a listener:
hammertime.on("touch", function(e) {
console.log(e.gesture);
}...
- 13.3k
1
vote
2
answers
2k
views
jQuery functions not working with Hammer.js
I am trying to add press to jQuery selector. I have many elements on same document, So I can not use IDs for each. I tried by $(selector)[i] as like explained here.
var selectProduct = $('.mh60 a');
...
- 2,124
33
votes
5
answers
12k
views
Vertical scroll is not working with HammerJS and Angular2
I'm having a problem using the HammerJS with Angular2.
I have a carousel (based on the bootstrap carousel with Angular2 event handlers) where I'm listening to the swipe left and swipe right events.
...
- 445
14
votes
1
answer
4k
views
App won't recognize swipes using Hammer.JS and HammerGestureConfig in Angular 9
I can't recognize swipes in my Angular app using Hammer.JS. It's setup like this:
"@angular/core": "~9.0.0-next.6",
"hammerjs": "^2.0.8",
"zone.js": "~0.10.2"
app.module.ts is looking like this:
...
- 2,656
11
votes
2
answers
8k
views
Google Chrome Pinch-to-zoom prevention
I'm developing an app for Chrome on a Microsoft Surface Pro 2 running Windows 8.1. Recently, the Chromium team decided they wanted to add the pinch-to-zoom gesture in Chrome for Windows 8, which is ...
- 125
11
votes
5
answers
27k
views
stopPropagation() with tap event
I'm using hammer.js and it appears that I event.stopPropagation() doesn't work with tap event.
If I click on the child, the associated event is triggered but parent's event is also triggered and I ...
- 1,491
7
votes
1
answer
3k
views
Multiple elements respond to touch event on mobile Webkit and Hammer JS
I'm working on a small side project using the Hammer JS library and I've ran into a problem on Chrome Dev Tools emulator and while debugging on two iOS 7 devices. It seems to work fine on desktop ...
- 71
7
votes
1
answer
25k
views
How to register touch move over events in Angular?
Summarize the problem
Stackblitz - https://stackblitz.com/edit/angular-touch-playground
I'm trying register touch events and want to be able to touch my finger, drag and lift my finger resulting in ...
- 7,693
6
votes
1
answer
2k
views
Prevent pinch/zoom in Safari for OSX
I have a html5 application with several viewports. I intend to use HammerJS for providing pinch/zoom gesture on individual viewports. Currently, whenever I pinch in Safari/OSX, the whole window is ...
- 5,800
6
votes
1
answer
7k
views
adding hammerjs to a react js component properly
I try to add hammer js to my reactjs component and my component looks as it follows
import React from 'react';
import _ from 'underscore';
import Hammer from 'hammerjs';
class Slider extends React....
- 8,985
5
votes
3
answers
8k
views
vertical scrolling blocked by Hammer.js
i am trying to make an app with Intel XDK (build 2727) and right now my problem is that i can't scroll vertical when i have a list which exceeds the screen size. i tracked the problem down to Hammer....
- 93
5
votes
1
answer
2k
views
Using hammer.js on dynamically loaded content
I'm playing around with hammer.js for a web app.
I can get it to work just fine, except on content loaded with ajax.
I use the hammer.js special-events plugin for jquery.
The following works fine:
...
- 367
5
votes
2
answers
3k
views
Recognize diagonal gestures(swipe) using Hammer.js
Is it possible to recognize diagonal swipe using Hammer.js?
I have gone through their documentation but didn't find anything saying about diagonal swiping or pan etc...
- 1,568
5
votes
1
answer
3k
views
iframe conflicting with hammer.js gestures
I'm using hammer.js [the jQuery plugin version] to provide simple touch gestures – in this case, I'm just using swipeleft and swiperight – to navigate between pages. All works good, except...
On some ...
- 637
5
votes
4
answers
15k
views
Hammer.js : How to handle / set tap and doubletap on same elements
I'm using jquery.hammer.js, it works quite well and I am able to bind function to a doubletap event. That is working fine.
What I want is to bind two different behaviors. One for the "tap", one for ...
5
votes
4
answers
3k
views
Event delegation with Hammer.js
How would I do jQuery-style event delegation with plain JavaScript in Hammer.js? E.g.:
Hammer(document).on('tap', '.item', function () {
console.log('tapped')
})
Is this directly possible or do I ...
- 2,813
4
votes
1
answer
2k
views
How can I keep the browser pinch to zoom and use the hammer.js pinch events?
Here is my code... just a simple test as I have never used hammer.js before:
var hammerTime = new Hammer($('#hammerTarget').get(0));
hammerTime.add(new Hammer.Pinch({event: 'pinch'})); // Add pinch ...
- 149
4
votes
1
answer
2k
views
What's the scoop on Pinch to Zoom Gesture with Ionic3 and Hammer.JS?
I need to be able to do pinch to zoom to scale font sizes, on both Android and iOS. (Not just a regular image per numerous examples I've seen when Googling). Can someone let me know if theres an easy ...
- 8,730
4
votes
3
answers
6k
views
Zooming SVG with Hammer.js
I am writing a cross platform web application that displays information using SVG. I need to have a multi-touch interface to pan and zoom the SVG graphic. From my research, it appears that Hammer.js ...
- 255
4
votes
1
answer
5k
views
Hammer.js is slow and jerky on pinchin/pinchout
I'm using hammer.js to implement some touchscreen functionality on a pet project.
The desired product is a map that can be dragged around and zoomed in and out with a touchscreen. I got it working,...
- 417
3
votes
1
answer
4k
views
Long press (hold) with jquery hammer.js 2 and event delegation
I recently upgraded to hammer.js 2 and one of the first things a I noticed was that "hold" has been replaced with "press".
My old code worked fine with event delegation, but switching to press only ...
- 859
3
votes
1
answer
3k
views
hammer.js swipe disabling native pinch to zoom
Is it possible to use the native "pinch to zoom" on touch devices while using hammerjs to recognize swipe gestures?
I want users to be able to zoom in on images in the gallery (as they can natively ...
- 175
3
votes
1
answer
3k
views
using backbone.js with hammer.js
Would like to know if anyone have used backbone with hammer.js and how to implement the Backbone.View with the drag, hold events of hammer.js?
- 76
3
votes
1
answer
3k
views
HammerJs: enable vertical scroll with horizontal swipe
I've got an angular 7 website, and I want to add horizontal swipe to one component, and vertical swipe to another (the components are in the same module). I'm using hammerjs for that.
By default, ...
- 34.2k
3
votes
1
answer
1k
views
Hammer events delegation and reuse of backbone view
Edit
According the Hammer Github page this bug was due to Manager leaks and should be fixed in the 2.0.5 version - this version is not built online but one can built it by himself. More info can be ...
- 3,006
3
votes
3
answers
4k
views
Angular2: HammerJS swipe for md-tab-group
I've implemented HammerJS in my Angular2 webapp and I've also tested the example code out. This code uses an Array of objects and seems to work flawlessly. However, I've been trying to implement the ...
- 2,238
2
votes
2
answers
20k
views
Pinch to zoom with Hammer.js
I want a pinch to Zoom function for an image. I want it to zoom in the area where the fingers are.
My index is only
<div id="wrapper" style="-webkit-transform: translate3d(0,0,0);overflow: hidden;...
- 456
2
votes
1
answer
2k
views
HammerJS swipe with Mat-Tabs blocking vertical scroll
SO I have a component in my Angular application that has tabs for categories of data with an array of values for the content of the tab. I want to use HammerJS to swipe between the tabs for a more ...
- 2,186
2
votes
2
answers
2k
views
HammerJS swipe not working on elements with overflow css property
EDIT: The snippet works fine when embedded in the question, but not when edited; which made me realize it had to do with underlying containers that can scroll... I tested this on my phone and hammer ...
- 9,025
2
votes
2
answers
3k
views
Swipe up/down not working on Ionic 2
How can I use swipe up or swipe down with Ionic 2?
I've tried the Gestures API but it only fires on horizontal swipe.
<ion-card (swipe)="swipePage($event)">
</ion-card>
- 485
2
votes
1
answer
460
views
IOS 13 not raising panend events when changing panning direction
I have a custom image slider using Hammer.js events.
I use the following to create my 'hammer' object:
const hammerPan = new Hammer(domElement,
{
// lock vertical scrolling when ...
- 144k
2
votes
1
answer
3k
views
Triggering Hammer.js drag/slide behavior on mouse click
I'm using Hammer.js to allow for dragging between panes. I also want to allow an alternate action where there's also a "Next" button you can click on (with a mouse) or touch (on touchscreen), that ...
- 1,014
2
votes
1
answer
1k
views
Dragging HTML element , implemented with HammerJS , is jittery on touch device
I have a list of HTML elements as cards stacked on top of each other. I am trying to drag the element with pan event using HammerJS
export class HomePage {
@ViewChildren('slides') slides;
@...
- 6,049
2
votes
2
answers
5k
views
Hammer.js pan event only for touch devices and not for desktop computer Click+Drag
I use this standard code for Pan / Pinch (1) with Hammer.js :
var mc = new Hammer(document.body);
mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith(mc.get('pan'));
// let the pan gesture ...
- 45k
1
vote
1
answer
4k
views
How to swipe an element using hammer.js in Backbone View
I'm pretty new to both backbone and hammer, but it took me a long time and I still didn't achieve my goal, so if someone could help, I'd be really thankful!
I want to have this functionality: http://...
- 743
1
vote
2
answers
12k
views
Prevent only horizontal scrolling mobile app
I'm developing an web app. On the left side is an sidebar using the Sidr-plugin (jQuery Plugin: Sidr). The test site is on my developing server. My problem is that if I'm swipe from left-to-right the ...
1
vote
1
answer
6k
views
pan on chart.js also zoom on line charts
I want to pan and zoom on a line chart with chartjs-plugin-zoom. The problem is that when I use pan it also zoom on chart till just one label remains, there is no problem when chart model is bar. how ...
- 145
1
vote
1
answer
2k
views
Hammer js - off() method doesn't work
I am using Hammer this way, it works (it just triggers next/prev buttons):
var slider = document.getElementsByClassName('slider');
Hammer(slider[0]).on("swiperight", function() {
prev.click();
})...
- 1,049
1
vote
1
answer
279
views
ngFor with Hammer JS swipe function in Angular 7
While using Hammer js swipe function with *ngFor in angular.The result expected was a swipe for particular index of tile and that tile will be removed. But by doing that the animation is not working ...
1
vote
2
answers
4k
views
Can't seem to pass options to Hammer.js Jquery
What am I doing wrong? Can't seem to pass any options to the JQuery plugin of Hammer.js
$('#my-div').hammer({direction: Hammer.DIRECTION_ALL}).bind('pan', function(e){
// do something
});
I've ...
- 345