When I do a Google image search on my iPhone within the Safari mobile browser, it gives me this beautiful interface for flipping through the images. If I swipe left or right, it browses through the images. If I touch and move up or down, I get what appears to be the native Safari scroll function. Can anyone explain how Google does this? I'm only beginning to learn the Safari API for touch events. It seems like either you capture the touch event to attach handlers to swipe left or right or you let Safari handle the touch events natively, in which case you get the beautiful native Safari scrolling. Can anyone explain how Google captures left/right swipe but not scrolling?
There are touch-specific DOM Events. They've implemented a lot of JavaScript logic around them. Read the Safari Web Content Guideline: Handling Events Docs Also checkout out the official spec for Touch Events
A while back, I wrote a quick library to wrap some native-like gestures as HTML events JSGestureRecognizer. I don't really recommend using that library in production, but reading the source should give you a pretty good idea about how google went about listening to native Touch Events and doing complex user interfaces with them.
Related
Since I´m working on a project where I need to be able to drag objects around my canvas but also to scroll the entire page by dragging the actual canvas 'background' behind my PIXI Sprites, i followed the findings of this guy here:
https://github.com/pixijs/pixi.js/issues/2483 :
By default, the Pixi canvas/display-area cannot be used to scroll the
webpage that contains it. Which is important on touch screens. (eg. If
you use the rest of the web-page to pinch-zoom into the Pixi canvas,
you can become trapped and unable to zoom back out (or pan away),
because there's no non-Pixi-canvas area of the page to "grab" with
your pinch gesture).
To enable this functionality, I use autoPreventDefault. But this comes
with some undesirable side-effects, like scroll/pinch-zoom actions
over the canvas registering "taps" or clicks in a way that doesn't
make sense. (ie. I'm attempting to zoom or scroll the outer page at
that point, not interact with the Pixi canvas)
To work around that, I modify and compile my own custom version of
Pixi where I can apply preventDefault in a more granular way...
To get page-scrolling functionality it seems I only need to
preventDefault in the InteractionManager.prototype.onTouchEnd
function. Whereas autoPreventDefault will also preventDefault on 3
other events. (onMouseDown, onTouchMove, onTouchStart).
Leaving autoPreventDefault = false and applying preventDefault only to
onTouchEnd, gives me the functionality I need. But it'd be nice to not
have to customize and rebuild Pixi in this way every release. (Sorry
if there's something else I'm missing here; I don't completely
understand the event system in Pixi, or what else to do about this
scroll-touch problem)
So i disabled e.preventDefault() on 'onTouchStart' and on 'onMouseMove' but left it as is on 'onTouchEnd'
This works perfect on IOS devices but not on Android, the only exception being a Samsung A7 using Adblock browser (fails on Chrome).
Would really appreciate some help on this.
TLDR:
Disabling PIXI´s e.preventDefault on onTouchStart and onMouseMove works on IOS devices and lets me scroll the page by draggin my canvas around but not on Android devices.
My solution for that was to use
renderer.plugins.interaction.autoPreventDefault = false
This should work on iOS and Android.
Docs for autoPreventDefault reads:
Should the manager automatically prevent default browser actions.
Using PIXI 4.5.6.
Take a look at the docs:
http://pixijs.download/dev/docs/PIXI.CanvasRenderer.html#plugins
http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html
Using renderer.plugins.interaction.autoPreventDefault=true should do the trick.
I have started to use Hammer.js to implement drag functionality for mobile browsers. I have noticed that this functionality also works on desktop browsers (which is confirmed by this compatibility table https://github.com/EightMedia/hammer.js/wiki/Compatibility ).
Are there any drawbacks of using Hammer.js for desktop browsers as well?
As an example; let's say I want to implement a scrollbar (from scratch) where the "thumb" can be dragged. Instead of implementing this using onmousedown/up, onmousemove and set/release mousecapture I can simply use the dragstart, drag and dragend events of Hammer.js.
Hammer.js does a pretty good job on detecting whether it is running on a multitouch enabled system or not.
In most cases it also works pretty well when you have both, a mouse and a touch display. We are developing a desktop web-application based on hammer.js, which should work both, with mouse and multitouch interaction and it mostly works fine. However, it seems that this scenario is not as well tested as the use on mobile devices. See for example this open bug, when hammer.js triggers a tap event twice on Chrome (https://github.com/EightMedia/hammer.js/issues/302) which got closed in between, because no activity was detected.
Note also, that it is often needed to fine tune the behaviour of hammer.js, by fiddling with the user_select, user_drag and prevent_default parameters (see for example this question ). On Google Chrome we also had to enable the experimental touch-actions : none. I do not know, how much of this is specific to desktop systems though.
Summary
Hammer.js is written with desktop systems in mind and does quite a good job in providing sensible behaviour on both mouse and touch based systems. In detail it requires sometime fine tuning to make everything work as expected.
A script I'm working on samples x/y mouse coordinates to determine a set of user gestures. It's currently attaching a mousemove event listener to document.body.
New requirements include adding listeners for mousedowns and keypress frequency. Those are simple enough. The other new requirement is replicating the interaction listening on mobiles/tablets.
My tentative plan is to avoid device-specific code like the touches object by using the legacy mouse and keypress support.
What challenges should I be aware of? For example, gotchas where a gesture with a mouse and a gesture with one finger will produce vastly different sets of x/y coordinates on mousemove... or a widely used mobile browser with super-odd event handling.
http://www.quirksmode.org/mobile/tableTouch.html is a wonderful reference.
Thanks!
Have you given jQuery Mobile a try? It comes loaded with all the touch gestures you'll ever need. I have used it and can confirm that it works across iOS and Android. Didn't quite test on other platforms though.
There is also this great jQuery plugin called jGestures which gives you access to many events such as touch, tap, pinch and even has a orientation change event.
jGestures: http://jgestures.codeplex.com/
Also I found this interesting page about touch events in Android and iOS and has a list of supported events on each platform: http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html
Forgive me if I've misunderstood your question and posted something unrelated. Hope this helps.
I am updating my scrolling game engine to output HTML5 code for the scrolling maps it generates, so that it can be used not only as a (somewhat-platform-specific) complete game creator, but also as a cross-platform HTML5 scrolling map editor. I got past the challenge of supporting the graphic tinting as described in my earlier question. And I have a nice sample running at http://sgdk2.enigmadream.com/ben/. However I have noticed that the mouse interaction for scrolling the map does not work on FireFox or on an iPod. It looks like iPod may use different events (ontouch etc) according to Native HTML5 Drag and Drop in Mobile Safari (iPad, iPod, iPhone)?. And that doesn't explain why FireFox wouldn't react. Isn't there a more universal way to support mouse or touch interaction? Do the touch events also work for mouse, or are they specific to touch? How would you recommend interacting with this scrolling map in the most cross-platform compatible way?
you need to correctly retrieve your srcElement
var srcEl = e.srcElement? e.srcElement : e.target;
try it
P.S.: see targets
I have a need to create a part of a mobile web page that can scroll on its own (even though I tend to disagree with that being a good thing on mobile). The standard method is to set it to overflow: scroll and there you go.
Alas, on iOS one needs to use two fingers to scroll that area which many still feel is unintuitive. This will be fixed in iOS5, but until then, I need to support it with one touch.
So I found a few JS options. One is Scrollability. The catch is that it only supports iOS. In addition to iOS I need to support android, BlackBerry OS6 and Nokia. So that one is out.
I then tried iScroll. This works pretty well. The catch, for me, is that it does this through pure JS in that you never see a native scrollbar. As such, the scrollbar it generates is more of a dummy in that there's no way to make it work with a mouse or keyboard.
So, the question: Is anyone aware of a JS solution for creating a scrolling div on a mobile web page that a) allows for one-touch scrolling on touch devices and b) uses a native scroll bar to enable keyboard devices?
If there isn't one, we can revert to device detection, giving touch devices the JS and keyboard devices the scrollbar...though that still leaves us the issue of some touch devices also having keyboards.