How to trigger MacBook trackpad haptic feedback on a website? - javascript

I'm writing a web application with a lot of drag and drop functionality and I want to enable haptic feedback (when possible, using macOS 10.11+ with a Force Touch trackpad) for actions like "snapping in" while dragging items.
Is this possible (I know it's impossible to support every platform, but at least when hardware supports it)? I've tried navigator.vibrate with different time values/patterns but it doesn't seem to do anything even if it returns true.

Should work with the Force Touch events, one of which is webkitmouseforcedown
someElement.addEventListener("webkitmouseforcedown", myFunction, false);
You can read more about this and the other events here
Please note that this will work only on Safari unfortunately

Related

Why is the onauxclick event triggered in a different way in google chrome browser?

So i developed a web app and i used onauxclick on a functionality. When i went to test it on firefox browser it all went perfectly. I tested it with google chrome browser and the onauxclick event handler wasn't working when pressing down the mouse wheel. After few more testing i was able to make it work by selecting the text and pressing the right mouse button (without leaving the selected text). So i was wondering, how does it work differently on google chrome browser and windows 10?
While the different browser vendors try to stay as close as possible to the W3C standards when implement HTML and JavaScript features, they do tend to sometimes introduce minor differences between implementations or even not implement some stuff at all.
The feature you are trying to use is at the moment experimental and not supported on Safari and Safari iOS. Expect it to change a bit until it is finalised and released.
More details here:
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onauxclick

Google Maps touch events not working on mobile devices

I'm running into an issue where touch events do not work, but click events do.
If you visit Google's Javascript Events page, you'll notice that click events work and so do drag events. Now, in Chrome, use the device tool to change to an iPad. Without refreshing, try to drag and swipe around. It won't work. Normal click events will still work. Now refresh the page while in iPad device view. The touch events will work.
Our issue is that we're always stuck with the touch events not working, even on touch devices.
Actually, there are already two related Issues #6425 and #4599 reported in gmaps-api-issues.
And, based from the threads, these issues are not fully resolved yet. There are, however, given workarounds which you can also try and one is available in GitHub - googleMapsAPITouchWorkaround.
For more of the workarounds, please go through the issues recorded in the tracker.

Events to bind to in mobile devices

I have a simple query:
My web application allows users to use keyboard shortcuts like Ctrl-X etc. to invoke events that require fast input and action e.g Aborting an action that was just carried out quickly.
I am aware of the events to bind to in js for desktops.
However, while I am aware of the tap events and events available for both desktop and mobile browsers (keypress etc.), I would like to ask your opinion on what events could be bound to specifically in mobile browsers, such as muting, volume up/down. The answers I found in Google were archaic and not very cross-browser compliant
So simply put, are there any events, for actions by the user, specifically for browsers on mobile devices that can be bound to, in the event that using click and tap events are too slow or cumbersome?
JQM by itself cannot access the buttons on the phone, if you want to do that you'll have to write additional Java code to access the buttons through the original Android API.
Or, you could use Phonegap: http://docs.phonegap.com/en/2.0.0/cordova_events_events.md.html#Events
Check it out, you can use the "volumeup" or "volumedown" events.
As far as I know, the best you can get is the touch events.
Take a look at http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html for iOS, not sure if the same documentation exists for android/BB.
It seems odd for a web app to override the default behavior of heavily OS involved physical buttons on the device, like volume/power/home buttons, as the user would experience abnormal behavior which would be confusing to the average user. I doubt it is possible to intercept them in a web app.
EDIT: This specific link has a list of iOS web events you can listen for in a table at the bottom:
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1

Javascript on mobile sites: Is it OK to use click?

I'm creating a mobile version for my sites, and I was wondering: is it ok to keep all the click events in the javascript as they are, or should I change it to tap (for example tap.js)
I've noticed that click works in all the browsers that I tested (Native, Dolphin and Chrome on Galaxy S2). Do you know of any issues in keeping the click events?
Mobile browsers are designed to work with most sites out of the box, thus they implement the click event just as desktop browser.
However, as Torsten Walter explained you might induce a noticeable delay if you don't explicitly manage the tap events.
To make it short : click will work but managing tap too will improve touchscreen user experience.

Simulating touch events on a PC browser

I am developing an HTML application for the iPad. As such it utilizes touch events and webkit-CSS animations.
Up until now I have used chrome as my debugging environment because of it's awesome developer mode.
What I would like is to be able to debug my Html/JavaScript using Google-Chrome's debugger on my PC while simulating touch events with my mouse.
My site does not have any multi-touch events and no mouse events (no mouse on iPad).
I am not actually interested in seeing the applications layout, but more in debugging its behavior.
Is there some plugin to get mouse events translated into touch events on a desktop browser?
As of April 13th 2012
In Google Chrome developer and canary builds there is now a checkbox for "Emulate touch events"
You can find it by opening the F12 developer tools and clicking on the gear at the bottom right of the screen.
For now (Chrome ver.36.0.1985.125) you can find it here: F12 => Esc => Emulation.
The desktop browser can simulate touch events by importing additional JS + CSS.
Take a look at:
addTouch
Phantom Limb
Another way to simulate multi touch on a desktop browser is the Touch Emulator of Hammer.js
We use this script: http://code.google.com/p/jquery-ui-for-ipad-and-iphone/
It will allow all mouse events in your application to be triggered by touch events instead. So, since we already had a web application that used right-clicking, drag-n-drop etc. it allowed us to perform all of the same functionality with touch.
I know it's almost the reverse of the simulation you were looking for (you will have to script your application to primarily be used by a mouse) but I hope it helps anyway.
If you're targeting Webkit specifically (iPad and all), you can rely on normal event handler code (add/removeEventListener). With that in mind, you probably need to just branch on a few events - e.g, 'ontouchstart' becomes 'onclick' based on the environment.
Offhand I don't know of any libraries providing this level of branching, though. Pretty easy to do yourself.

Categories

Resources