748
questions
4
votes
1
answer
1k
views
FabricJS Drawing mode and Hammer.JS Pinch creates unwanted, non objects
The task is to create a drawing app. If the Fabric's drawing mode is activated, and I try to pinch using hammer.js's Pinch event, a weird artifact appears, that does not show when I call getObjects() ...
- 552
0
votes
1
answer
1k
views
How to stop Hammer.js from not propagating swipe events?
I have a working markup and script to track horizontal swipes on a container using Hammer.js:
const container = document.getElementsByClassName('swiper')[0];
const manager = new Hammer.Manager(...
- 2,766
0
votes
0
answers
410
views
Uncaught TypeError: Cannot set property 'bindDom' of undefined
Am using laravel-boilerplate for my application and i installed hammer.js using npm command. When i run npm run dev command the laravel-mix build is successful, but am getting an error like
...
- 87
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,196
1
vote
0
answers
933
views
React Hammer - making Pinch (zoom) work
I am making a component with React and Hammer using react-hammer and I can't seem to get the pinch to work! I have successfully used the swipe events, but got stuck here.
This is the piece of code:
...
0
votes
1
answer
227
views
Prevent swiperight event from hammerjs with carousel slide
I'm using Hammer.js (v2.0.8) to show the left menu but I also have a carousel in the same page (with owl carousel v2.3.4). When I slide the carousel, the menu open too. I try Hammer.off() but he doesn'...
- 514
3
votes
1
answer
938
views
How to stop hammer.js from conflicting with the normal scrolling
im using hammer.js to detect drags and swipes.
Thats the code:
var element = document.getElementById('pinwall-grid');
var hammertime = Hammer(element).on("drag", function (event)...
user9769696
0
votes
1
answer
2k
views
how to scroll 50% of viewport height in window.innerheight
thats my full js code:
//init hammer function
var element=document.getElementById('pinwall-grid');
var hammertime=Hammer(element).on("drag", function(event) {
direction=event.gesture.direction;
...
user9769696
0
votes
0
answers
171
views
How to fix an x and y scrolling conflict in a slider on mobile?
I have a slider that is using the Hammer.js library to detect the touch evens done by the user. thats the code:
//init hammer function
var element = document.getElementById('pinwall-grid');
var ...
user9769696
1
vote
1
answer
266
views
My Hammer JS will not register my tap handler until I have used the pan function
I normally find all my answers here but I haven't seen this one yet.
So I have two hammer js event listeners, pan and tap.
Pan works perfectly all the time, however, the tap does not appear to be ...
- 393
2
votes
0
answers
129
views
Hammerjs swipe locks the window.innerHeight on Chrome Android
I've run into an issue with hammerjs on Chrome Android 66.
I have a side bar menu that's position:fixed, with top:0 and bottom:0. When the menu item opens, the layout is correct for when URL Bar at ...
- 323
0
votes
0
answers
161
views
How many touches can I recognize using Hammer JS?
I would like to know how many touches I can manage using Hammer JS.
- 1,963
6
votes
2
answers
1k
views
How to set touch gestures / hammer.js active on a specific viewport?
I've just finished constructing my carousel slider with touch events for a website I'm building. Currently trying to figure out how I can active or disable the touch events(hammer) on specific ...
- 1,111
5
votes
0
answers
966
views
Hammer.js swipe support for 1 and/or 2 fingers
I'm using Hammer.js with Angular 5 to support swipping with both mouse and touch. The problem is that the touch action should be done with two fingers instead of one.
Is it possible to support both 1 ...
- 412
0
votes
1
answer
342
views
Hammer.js on tap is stoppng parent div from scrolling
I am currently using Hammer.JS to create a desktop and mobile friendly user interface.
The following is the CSS for a parent div that has smaller divs in it populated by JS.
.attributescroll {
...
- 416
5
votes
0
answers
667
views
HammerJS not working with Angular Material 2 tabs on mobile.
I'm Trying to integrate swipe gestures in Angular material 2(Angular5). It is working with mouse on desktop. The problem is that when I use mobile(Chrome) it only senses the gesture on labels of tabs.
...
- 113
0
votes
1
answer
251
views
Has anyone has success using Hammer.js Pinch Events on 3D models?
I'm using Hammer on an augmented reality project and have success moving, rotating, and placing a 3d model (JSON) using Hammer.js.
I'm trying to use the pinch events to scale the object up and down, ...
- 241
2
votes
1
answer
1k
views
HammerJS vertical swipe and VERTICAL scroll simultaneously
I have a fullpage web site on angular 5, which do pagination by vertical swipe down and up (on desctop version is listening for wheel events). On mobile I met a serious problem with non-hiding address ...
- 359
0
votes
1
answer
252
views
HammerJS pan fails for grandchild element in Firefox
I have a gallery pen (based on a pen by Drew Power) with Hammerjs Pan to slide images horizontally. Works fine in Chrome & Safari, but not in Firefox
The basic structure:
<div class="slider"&...
- 45
1
vote
1
answer
6k
views
Hammerjs configuration for pinch zoom in Angular
I am using HammerJS with Angular 4 application for pinch zoom an image. In hammerJS doc it is mentioned by default pinch zoom is set to off and the code to turn it on is
hammertime.get('pinch').set({...
- 63
5
votes
3
answers
4k
views
Edge Swipe Navigation
Can you recommend a JS library that actually provides edge swipe functionality when working with bare-bones HTML & CSS?
I've searched all over and haven't found a source of truth for that problem....
- 1,896
0
votes
1
answer
477
views
Panning gesture hovering HTML elements
How is possible to achieve hovering effect over elements in container via pan gesture?
HTML:
<div class="container">
<div class="item"></div>
<div class="item"></div>...
- 25
1
vote
1
answer
334
views
Hammer.js for Angular 2+
I use hammer.js in my applications (Angular 2 and 5).
I use events from this library, as example - tap.
If I destroy any DOM-element with the help of *ngIf, there's subscription on the event. As a ...
0
votes
1
answer
396
views
SetInterval reset on swipe
So I'm trying to add a progress bar to the "Superslides" slider. I've used setInverval to trigger this when a slide finishes animating and for the most part it works.
I also added a little bit that ...
- 65
3
votes
2
answers
1k
views
Dragging an element with hammer.js fails on mobile
I'm working on an interface to allow the user to drag an object around the screen using hammer.js. In a desktop browser it works, but on mobile when I start dragging it works briefly, then suddenly ...
- 9,312
1
vote
1
answer
2k
views
How to create a draggable element with HammerJs and Angular
I am trying to implement a draggable functionality with HammerJs and Angular but my element does not move. The mouse points are printed out but the element does not move.
@Component({
selector: '...
- 1,221
1
vote
0
answers
546
views
HammerJS pan either forces horizontal event on a vertical scroll, or disables scrolling all together
I'm making an animation for a flip-pagey effect on a site.
I need to use HammerJS pan to measure the distance the fingers travelled, swipe does not support this apparently.
However it breaks at a ...
- 484
6
votes
2
answers
5k
views
zoom and pan on charts in angular
I have a problem on angular ( v5) with this plugin:
ng2-charts ( from charts.js)
chartjs-plugin-zoom
hammer.js
I have a simply chart and i'd like to zoom and pan on this, but it doesn't works.
I ...
- 240
1
vote
0
answers
567
views
How to get rid of `user-select: none` in React Hammer.js?
The plugin sets style attribute user-select: none to children:
<main class="foo" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, ...
- 30.5k
0
votes
0
answers
436
views
hammer.js swiping many individual images & targeting child element
I'm messing around with hammer.js and want to swipe 100 images that are stacked on one another. Basically, like a stack of cards. I'm having trouble targeting the child element of the #wrap and why my ...
2
votes
0
answers
154
views
Can't click the links on my D3 Map on mobile devices
I have a D3.js map of the US with links appended on to the map (see code below). However, when I go to my iPhone (Safari browser) I can't click on the links. Does anyone know why this is or how to fix?...
- 83
1
vote
1
answer
1k
views
Using pan along with swipe is not working in Hammer.JS
I have a grid where pan should be used for multiple selection of grid rows. Swipe should be used from scrolling the rows. When I use both pan and swipe always pan fires not swipe.
I tried ...
- 11
1
vote
0
answers
245
views
How to set zoom focus based on pinch location using hammer.js
I am able to perform pinch for div content when passing the element to the method below, but whilst the pinch is performing the focus is always at the center.
How can I change the focus based on ...
- 11
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
5
votes
2
answers
4k
views
Configure hammer.js gestures for different modules in Angular
I have a standard Hammer gestures custom config in my root module:
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { HammerGestureConfig } from '@angular/platform-browser';
...
- 874
0
votes
2
answers
765
views
Render called on every setState when using touch gestures
I have a problem using touch gestures in my react.js app. The problem is that the render() function is called on every setState call and not just at the end. This only happens when using Hammer.js to ...
-1
votes
1
answer
1k
views
Use vis.js with materialize : Uncaught TypeError: Hammer.assign is not a function
I'm trying to run vis.js in an Angular4 project configured with Angular-cli that is already using Materialize-css
When running the angular application I get this error in console :
Uncaught ...
- 6,475
0
votes
1
answer
454
views
Using Hammer JS as a carousel
In building a custom carousel with Hammer JS 2.0.8, I had some trouble making it work fluidly. After multiple tries, I found a snippet that really helped, and when I eventually completed the module, I ...
-1
votes
1
answer
1k
views
Hammer js rotation direction
I am new with Hammer.js and succesfully implements rotate recognizer:
var image = document.getElementById('image');
var manager = new Hammer(image);
manager.get('rotate').set({ ...
1
vote
1
answer
2k
views
Using hammer js with a canvas
I have a little problem using Hammer JS with my canvas.
I explain ;
I have a canvas defined like this :
<canvas id="myCanvas"></canvas>
In this canvas, i add some Img :
var s = new ...
- 169
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,810
0
votes
0
answers
217
views
is using angular-cli.json the preferred way to add 3rd party scripts (into your Angular apps)?
Is this
`<script src="../node_modules/hammerjs/hammer.min.js"></script>`
or this
"scripts": [
"../node_modules/hammerjs/hammer.min.js"
]`
method a better way to include ...
- 4,591
0
votes
0
answers
971
views
Detect Touch screen [duplicate]
I make an app with angular (4), material and the mobile app with cordova.
I have some event with swipe (with hammer.js), at this moment i use screen size to know if i'm on touch screen.(xs,sm,md for ...
- 106
8
votes
2
answers
6k
views
(swipeup) isn't triggering in Angular 4 with Hammerjs
I have noticed that the directive (swipeup) does not seem to be working:
I have tried using (swipeleft) and that works:
<div [@myAnimation] (swipeup)="showActionBar = false" fxFlex="56px" *ngIf="...
7
votes
1
answer
830
views
Turning off hammer.js touch events using onclick event
I've just finished constructing my carousel slider with touch events for a website I'm building. Currently trying to figure out how I can disable the touch events(hammer) using on click events. Here ...
- 1,111
-2
votes
2
answers
646
views
Angular - Hammerjs - Load html content in swipe action
The following swipe action loads three images in the template. They currently work fine but I would like to change two of the images with a functional Google Maps iframe and a loop of checkboxes and ...
- 3,216
0
votes
0
answers
241
views
Ionic pinchin and pinchout gestures don't seem to work with android
this is my pinch zone.
<div class="pinch-div" #pinchDiv></div>
related properties
gesture: Gesture;
@ViewChild('pinchDiv') element;
initialization
this.angle = 15;
this.gesture = new ...
- 1,622
8
votes
7
answers
4k
views
Carousel slides incorrectly when swiping or when clicking the slider controls (next/prev)
I've just finished building a carousel I've been working on that uses swipe/touch and also uses controls such as prev/next to control the carousel. Right now I'm having an issue regarding about the ...
- 1,111
1
vote
1
answer
328
views
Add gesture to custom component
I have a custom menu i've built because i need a menu with specific functions and behaviours and modifying the Ionic's menu component seemed to be too much work for what i need, so here's my problem:
...
- 6,421
2
votes
1
answer
1k
views
Hammerjs with touch emulator not working in React
I've been trying to test and emulate touch events using Hammerjs in React, but with extremely inconsistent behavior between browsers and events.
Let's take simple code like:
import React from 'react'...
- 7,111