Detect mobile browser pinch zoom - javascript

I want to know if there is a way to detect user is doing pinch zoom.
I want to do two things when user zooming in:
let the div align the left side of screen
set the width of div equal to the viewport width
I found Android has touchstart, touchend and touchmove, but they won't be triggered during multitouch. I want to complete above function right after finishing zooming.
Are there any other approaches?
I am not doing the web app. I am just adding some functions to the mobile version.

Android browser supports touchstart, touchend & touchmove with JavaScript, but the problem with older androids is the number of touches these events are detecting.
For example, this code will log the message on IOS and on newer android devices:
var obj = document.getElementById('elmId');
obj.addEventListener('touchmove', function(event) {
if (event.targetTouches.length == 2) {
console.log("exactly 2 fingers gesture inside elmId ");
}
}, false);
Older androids will do nothing because event.targetTouches.length will never be equal to 2.
IMHO, you should use this approach that will support most devices and provide a fallback option for older devices (use other gestures for zooming like double tap or a button to zoom).

Android has a ScaleGestureDetector. Here's an example. However, if you require additional multitouch support, e.g., rotation, I would recommend this library. I have used it personally (to store and retrieve transformation matrices of multiple images) and found it an excellent resource.

Related

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.

Is it possible to know if a real mouse is used on a device with touch features using javascript?

I'am working on a web site and I'am using modernizer to know if a device is touch compatible.
In this case, i filter all 'hover' of html tags of my application.
example : .no-touch div.cell:hover
But how can I know if the user also uses a real mouse on a touch device ?
More and more devices allow both and i want to display 'hover' on touch devices when a user prefers to use a mouse instead of (touch).
I'am using angularjs then a related solution should be great.
Thanks
Mouse events should trigger click events, whereas Touch events should trigger the touch events. However, let it be known now that some touch screens (typically older models) don't have "real" touch capability. All they do is take the touch input and convert it into clicks.
Also, I don't think the :hover attribute ever cares if it's mouse or touch. I think the only calculation that goes into that is whether or not the cursor is above the given element.

Javascript swipe event while maintaining browser pinch functionality

I am looking to utilize swipe events on a mobile web app (Android, and iOS), but I also need the browsers native pinch to zoom functionality to stay in place.
I have tried using various touch event libraries such as Hammer.js, but all seem to discard mobile Safari's pinch to zoom functionality when swipes are handled. It would also be nice to keep vertical scrolling intact as well.
Basically, I am looking for a way to recognize left/right direction swipes, and only that. Any ideas?
I used similar functionality to this in a recent project. To allow the pinch to zoom functionality to work you just need to make sure you correctly specify the values in the viewport tag eg.
<meta name=viewport content="width=device-width,user-scalable=yes,initial-scale=1.0, maximum-scale=2.0"/>
The most important values are the user-scalable=yes and also the maximum scale since this must be greater than 1.0 to allow for zooming.
You can find more information on viewport here: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
For the swipe events you can bind the swipeleft and swiperight events to a .on() function in jQuery Mobile.
Here is an example of what your code should look like:
$('#yourElement').on('swipeleft swiperight', function (event) {
//swiped to the left
if (event.type == "swipeleft") {
//do something
}
//swiped to the right
if (event.type == "swiperight") {
//do something
}
});
For more info on jQuery Mobile events you can check out this link (or the link m_gol provided above since they are basically the same):
http://jquerymobile.com/demos/1.1.1/docs/api/events.html
Using both sets of code above, you will be able to detect swipe events as well as pinch to zoom the page.

what are differences between touchmove and gesturechange?

I originally wanted to track one-finger panning on mobile webkit (iOS/Android). I found Creating a "sticky" fixed-position item that works on iOS Safari and I saw gesturechange. But as far as I tried, gesturechange only seems to be fired for two-finger move. Then I found touchmove event and it seems I can use that.
What are differences between touchmove and gesturechange?
Is it right to use touchmove for detecting one-finger panning?
1.Touchmove, touchstart, touchend, touchcancel are part of the multi-touch sequence. A multi-touch sequence begins when a finger first touches the surface.
gesturechange, gesturestart, gestureend are still part of multi-touch sequence but they contain more precise objects. Not all devices support gesture events. They contain scaling and rotation information allowing gestures to be combined, if supported by the platform. If not supported, one gesture ends before another starts.
2.So if you are just aiming for one finger such as swipe or slider I would use just use the touchmove. Unless you really want to turn your swipe into a 3d effect or rotate it i would combine touchmove and gesturechange.
GL
source:
https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1

Cross-platform HTML touchend event handling

In reading about the touchend event, it seem that the behavior is somewhat inconsistent across different devices. I simply want to know the best and simplest way to determine whether all touching has ceased. Do I understand correctly that I can't rely on event.touches being null or empty when this is the case because some devices will include the ended touch in that list? Do I understand correctly that I can't rely on changedTouches being the same length as touches when this is the case because some devices will exclude the ended touch from touches?
For now only OSX (ipad, iphone) support ongesturechange event on their browser. All the other events are supported in all devices, here are some of them and that is the way how to use them. To detect touch end you can use touchend even, it is the same over all devices and it will fires when all fingers are not in touch:
$(someel).bind('touchend',callback');
To detect touch support just use this
var touchy=("ontouchstart" in document.documentElement)?true:false;
Safari developers ipad guide has a good documentation on this.
UPDATE: In fact I was wrong, touchend fires every time a finger lifts up: here is an excellent pdf for you: http://www.albanx.com/programing/ajaxupload/uploaded/SafariJSRef.pdf look at page 21.

Categories