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.
Related
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.
I have been looking for examples for using D3 on a mobile device with touch events instead of mouse events, but am struggling to find anything that maps what touch event replaces which mouse event for example, a click or dblclick. Thus, I have struggled to get started on "converting" my D3 visualizations to support touch.
I need appropriate touch events for:
Zooming (or will it work for both?):
var zoomed = d3.behavior.zoom().x(x).y(y).scaleExtent([scaleExtentMin, scaleExtentMax]).on("zoom", partitionZoom);
click
dblclick
So the main conversion I would need is click --> supported touch event.
How can I do this with D3? Or is there an alternative library that would work well with D3 that can handle the touch events?
Any help with this would be appreciated!
what ever event is supported by html containers is supported by svg. click and tap events are the same except for the 300ms delay. you can use hammer like previously suggested or just jquery mobile
I am creating a web app that uses the jquery.mousewheel.js plugin to detect the user's mousewheel and then scroll between the two sections.
The body element is also set to overflow:hidden so I can't detect a scroll event.
It works perfectly on the desktop but I've tried it on iPhone and it doesn't trigger the mouse wheel event at all. So is there some sort of add-on to the plugin I am using or an alternative event I can listen for, that will tell me when the user tries to scroll down/up vertically?
Using something like Hammer.js you can detect swipes via swipeup & swipedown events, and it even includes a jquery plugin so you can just write the following:
$("html, body").hammer().on("swipedown", function(e) {
// do scroll up stuff
});
$("html, body").hammer().on("swipeup", function(e) {
// do scroll down stuff
});
You can capture the gestures with HammerJS, but then you have to code the scrolling yourself. Another option is to use iScroll with probing enabled, letting you capture the scroll position without interfering. More here:
javascript scroll event for iPhone/iPad?
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.
Doing Web app for iPad clients, but need to recognize where user is doing one- and whe two-finger scrolls. Anybody know how to implement it? Any convenient jQuery plug in or something? Thanks.
I'm going to assume that by 'scroll' you mean the panning gesture.
Looking at Handling Events documentation for mobile Safari it would seem that unless the element is scrollable you wont be able to detect any difference using the high-level DOM-events (both the one- and two-finger
panning gesture will result in an onscroll event when movement stops).
If, the element is scrollable you'll receive a series of mousewheel events instead.
If you'd be willing to get your hands a little dirty you should have a look at the section called 'Handling Multi-Touch Events'. You could probably achieve what you want by opting-in to receive the more low-level multi-touch events (touchStart, touchMove, touchEnd, touchCancel). The event object passed to the handlers of these events contains a 'touches' property which allows you to look at the position of all "fingertips". That'd propably give you all information you need.
Don't forget to prevent the default behavior though, otherwise you'll still receive the onscroll and/or mousewheel events.
Have a look at the "virtual light table" demo for some inspiration on handling multi touch events in javascript. There's also an excellent article at sitepen.com that you should have a look at.