How to capture two finger event in javascript on Mac? - javascript

I am building a website with reactjs. The main DOM I am using is Canvas and users are allowed to move around the web page with the two fingers gesture on Mac OS. If the user move to the left side of the canvas it will trigger a navigator event on the browser to go back. How can I stop the go back event on browser?
I know I can disable the two fingers swipe gesture in system Trackpad configuration. But I don't want to do that since it doesn't seem like a good solution from users' point of view.

Related

Sending a tap to a Web application through VoiceOver

I am building a web application for use by visually impaired users to explore SVG diagrams via a tactile printout. In order to allow this I need to calibrate the tactile printout to the image on the device. Thus I need to be able to receive the x and y coordinates of a click when using a screen reader, specifically VoiceOver for iOS.
Using Talkback, I would tap and hold until I hear an audible click and then use my second finger to double tap and send clicks to the application itself from that position.
When using VoiceOver, I understand how to send swipes by tap and holding until a triple bell and then swipe. However, I cannot for the life of me find out how to send a positioned click.
On a side note, I am using Hammer.js.
Any ideas?
Thanks
As far as I can tell, this functionality was supplanted by the interactive drag-and-drop support added to VoiceOver in iOS 11.

Hybrid PC/Tablet website

What is the reliable approach to develop a website that is used on the computer that is a hybrid, in other words have both a mouse (or a touch pad) and a touch screen and can be used by a user in both ways at the same time.
Especially the question is how to deal with the mouse cursor, that must be seen when using a mouse and is distracting once the user uses her finger.
The goal is to develop a single page, not two separate pages, one for mouse and other for the touch. Style cursor = 'none' is killing the cursor over the specified elements completely, this is not desired.
I am not talking about scrolling or zooming, but about clickable/touchable divs/spans/images, that can react some how. For instance I have a table where each cell could be clicked to mark (change color). Same with buttons, once you touch the button with the finger, the mouse cursor will stay on top of it and distract.
HTML5 does support the concept of touch events, perhaps you can dynamically change behavior/style etc in javascript based on detected events (e.g. turn your page into touch mode "cursor = none" if you detect a touch event but switch back to mouse visible style if you detect mouse move events).
This is by no means completely reliable as touchevent implementation is browser (somewhat patchy support at that), OS and possibly hardware dependent. e.g. Older OSes might translate touch event into mouse click events or older browsers might not support OS's touch events and OS fallsback to mouse click events.
See Touch And Mouse for more info that might help you.

What is the event that toggles appbar in javascript Windows 8 Metro Style App?

I am looking for the event that toggles the appbar in javascript. So it's basically the "edge-swipe" gesture event on the top/bottom edge of the screen.
For example, I want to show a text "edge swiped" on the page when the user swipe the upper or butto edge of the screen, without declaring a app bar in the page. How will I be able to do that?
I tried crossslide event and it doesn't seem to be right.
you can see the documentation for AppBar here
Appbar has four events: afterhide, aftershow, beforehide and beforeshow.
Check the documentation for more details
Cross-slide won't work for you because it's a gesture that can start anywhere.
There's no edge-slide event that is exposed to a Metro app. Windows 8 detects the edge-slide and raises the app bar for you automatically (when you have one).
Maybe they'll add one in the future, but who know's if or when, so you'll probably want to do your own gesture tracking. I'd suggest you have look at the PointerPoint class and building your own custom gesture recognizer.
A basic edge swipe should be easy enough to recognize, though you'll have to pay attention to all the pointers on screen. For example, if I have a tablet that tracks 5 fingers and one of them edge-slides, do you recognize the gesture regardless or only if there is a single touch point active at the time? That's up to you.

Capture the swipe effect to navigate to next page in HTML5 Ipad App

I'm making an offline version of an online products catalogue for the Ipad. It will be written in HTML5 / JS and utilise offline image caching and localstorage.
I want to be able to introduce the same UI interactions as come with the Ipad in terms of swiping. So if the user swipes from right to left, it will load the next product. If they swipe from left to right, it will load the previous image.
How do I capture this with Javascript ?
You can have a look at the events supported by mobile Safari here:
http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
touchstart, touchmove and touchend events in particular
Or, if you don't want to reinvent the wheel, you can have a look at these scripts:
http://cubiq.org/swipeview
http://plugins.jquery.com/project/swipe

Android: disable pinch zoom and pass event to Flash content

I have a flash application written in actionscript 2.0 that shows vector architectural maps and works perfectly on common web browsers. There are many interactions with javascript functions called by user events on the webpage, such as zooming to a certain x,y point. This event is usually accomplished via the mouse wheel.
Now I have to make sure that the thing works on tablet pc, in particular the Galaxy Tab. The first thing I have to fix is that, obviously, there is no mouse wheel and the user naturally tries to pinch zoom the flash application, with the result of zooming the entire web browser.
What I need is to listen to the multitouch gesture and, when a pinch zoom event is called, disable the default zooming event and call a javascript/flash function that allows my flash app to zoom only the objects that need to be zoomed: in few words, the browser stays still and only a part of the flash zooms in or out.
Consider that I am totally new to Android and that I already have working javascript functions to call flash object functions for the zooming purpose, so I just need to connect them to some android things that tell me when the user tries to pinch zoom in and when he tries to pinch zoom out (and possibly the x,y point of zoom).
Thanks a lot for your help!
Max (Italy)
Passing a JavaScript call from android to flash is a very very hard task as far as I know.
Not because of android (follow this tutorial http://code.google.com/p/openmobster/wiki/JavascriptBridge to pass a JavaScript call to a web page ), but because of flash securities for local content.
It is not too much of an issue on a local computer, but the flashplayer on android is very very buggy.
I think the best is to try to find an other solution if possible...

Categories