I'm using HammerJS to detect left swipes on touch screen devices. I'm trying to open a slide-out menu every time the user swipes left anywhere on the page when browsing on a touch-screen device. It works fine in portrait mode but not in landscape. I thought it might be because the direction might be changing from left to up/down, however the alert doesn't happen at all when the device is landscape. There is a fixed-position menu bar at the top of the page and it always works when swiping left on that, but not on the rest of the page. The same problem occurs on iOS Safari, and on Android Browser, Chrome, and Firefox.
I noticed on the HammerJS documentation it says "When calling Hammer() to create a simple instance, the pan and swipe recognizers are configured to only detect horizontal gestures." (http://hammerjs.github.io/recognizer-pan/). Could this be the cause of the problem? In landscape what were horizontal gestures become vertical? If so is there a workaround?
Any ideas? Thanks.
Hammer = require "hammerjs"
#body = new Hammer document.body
#body.on "panend", (e) =>
alert "panned!"
e.preventDefault()
if e.direction is Hammer.DIRECTION_LEFT
# open the menu
Related
I have a jquery that can show and hide advertisement on my website when ever the user is scrolling to a certain point in that page. It's working on desktop but on mobile, to make it work, I have to scroll without remove my finger from the screen. Whenever my finger is remove from the screen, then the code is no longer recognise the scroll.
My question, how to detect the scroll when my finger is off the screen but the screen is still scrolling?
$window.on('scroll', goScroll);
$(document.body).on('touchmove', goScroll);
I have a web page which has a scroll area, and some buttons outside of the scroll area. In mobile browsers or emulated mobile mode in pc browsers, when the scroll area is auto-scrolling (after the finger swipe on the screen quickly then remove the finger from screen), I can't tap the buttons or to do anything until the scrolling is finished. I tried Chrome and Safari, they all have the same problem. Is there any way to fix this? I want to trigger the button when it's scrolling.
So I've built a website and everything is going fine except one thing. When you go to the shop page on a mobile and hit "filter products" (only visible on screens up to 1000px wide), the filter menu that slides out doesn't scroll.
If you try it on your laptop using the mouse wheel it will scroll fine, but go on your phone (or get the chrome inspector to mimic a touch device) and you'll see it doesn't scroll any more when you touch the screen, only with the mouse wheel.
Here is the page in question: https://growitmowit.co.uk/shop/
I have tried ripping the css & js out but once you've clicked "filter products" and the menu has slided out you cannot scroll (with touch) until you slide the filter menu away.
I've now spent hours trying to figure it out and need some help :) Thank you in advance.
oh yeah - sometimes, when you first open the page with the inspector in device mode it is fine. If that's the case refresh the page and it'll start playing up :(
A web page I am developing has mouse over events (both css and javascript) for a top navigation bar. It works fine when the browser window is floating, but when maximized (full screen) the hover classes have no effect anymore. It begins to act like a tablet display, I must point and click for my hover actions to take effect. I achieve the events when I click, but mouse hover changes my cursor to a text select cursor.
This does not happen on a windows computer
As a matter of fact, this behaviour is good if it is meant to support tablets but I'd appreciate if anybody could let me know if this is a bug or intended?
This is a 3+ year old unfixed bug in Chromium.
http://crbug.com/170058
I'm making a small full-screen canvas game to be played on mobile. It involves swiping around the screen with your finger. I have the canvas listening for touch events (down, move, up).
Unfortunately, the browser tries to interpret swipes left and right as browser tab navigation, and swipes up and down as hide/show URL. I don't care if the URL is hidden or not, I just want everything to stay still.
As a result of everything moving, it intermittently stops recognizing inputs to the canvas.
The way I have it set up is a canvas that takes the size of the screen, set its position to fixed at 0,0. This is to prevent scrolling (which works, except for the hide/show url thing).
If you want to see an example, here's where I'm hosting it:
http://phildogames.com/scratch/sust/index.html?game=window (you won't be able to interact on desktop because it's listening for touch events, but if you view it on mobile you should be able to open and close the windows).
tl;dr: I want to tell the browser to simply pass swipes (well, all touch events) to the dom and stop interpreting them as intents to scroll, switch tabs, hide/show URL, etc..
Thanks!
I was able to solve your problem by simply preventing touches on the body.
var myBody = document.getElementById('dabody');
myBody.addEventListener('touchstart', function(e){
e.preventDefault()
});
You can throw that in console to test. Tested on iOS Safari and Android Chrome.