I am creating a simple web app that uses the new version of hammerJS for pinch zooming. I am having an issue with the default iOS page drag when a pinch starts. This seams to override the pinch event that I am attempting to capture. Any help stoping this while using hammerJS would be greatly appreciated.
PS: I have attempted to use event.preventDefault() to no avail.
You need to call preventDefault slightly differently to how you may be used to. Like so:
$('#your_element').on('pinch', function(event) {
event.gesture.preventDefault();
});
See this hammer.js example for another example.
Put this in your header:
<meta name="viewport" content="width=device-width,user-scalable=no">
Basically the user-scalable property controls if users are allowed to zoom the page. So once you disable it you can control the zoom with hammerJs.
More info here https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag#Viewport_basics
What were you calling preventDefault on? I usually combine #Bertrand's answer with something like this
$(body).on('touchmove', function(e){
e.preventDefault();
});
Related
So I'm making a small HTML canvas application in HTML and JS, and ran into a problem with touch gestures.
I am working on allowing users to draw on a canvas with a touch screen. After adding support for multi touch I realized that the default touch gestures, such as scrolling or zooming, are still active.
I need to disable the default touch gestures for the entire page.
My first idea was to use Event.preventDefault() but it gives off an error and solves nothing.
Then I found this HTML attribute content="user-scalable=no" but that didn't work either.
So now I'm a bit stumped and would love some advice.
I know that you mentioned using event.preventDefault(), but it is a little confusing that this did not work for you, as it is the recommended way to do something like this.
Try this:
window.ontouchstart = function(event) {
if (event.touches.length>1) { //If there is more than one touch
event.preventDefault();
}
}
It does the following:
Runs whenever the user begins touching their device's screen (ontouchstart).
The function is given the event variable, which contains details about the event, including an array called touches with information about each touch in it. This array has an item for each place the screen is being pressed, so by getting it's length (event.touches.length) we get how many fingers the user is using - obviously we do not want to cancel single presses, as otherwise the user will not be able to do anything.
Finally, we call event.preventDefault() to prevent the default actions caused by these events. You could also implement your own custom actions above the event.preventDefault line.
For further information, you can take a look at this StackOverflow page.
i figured it out. the event.preventDefault() doesnt work at all but using <meta name="viewport" content="width=device-width, user-scalable=no"> this i got it to work properly. the issue was that i was using that attribute in my canvas instead of the meta so i had <canvas id="canvas" width="2000" height="2000" content="user-scalable=no">. thanks either way.
Edit: nope still not working. I was debugging on my pc with the chrome tools but seems to have had no effect on an actual touchscreen
I'm trying to add touch functionality to an SVG.
I recognise the touch event using a jQuery like selector.
(I'm actually using angular JQLite - angular.element()):
.on("mousedown touch", function(event) {
On my desktop and in mobile Safari, there's no issue. The touches are recognised correctly.
It also responds correctly when saved as a bookmark, but when I include:
<meta name="apple-mobile-web-app-capable" content="yes" />
in my header, and save to the home screen.. the touch piece doesn't respond.
I'm wondering whether anybody knows the root cause of this or has a a workaround?
I'm using Angular 1.2.27 and iOS 8
For info, I worked around the issue by embedding an ng-click within the SVG itself.
This would tend to point to angulars JQLite implementation of click/moousedown/touchstart being the cause or possibly not supporting the same touch events as ng-click.
Add the following lines to your css-file.
svg {
pointer-events: none;
}
Now it should work.
I would like to know if there's any way to detect that a pinch zoom event has taken place. I could achieve it by using this event binding for iOS
$(document).bind('gesturechange',function(event){
zoomAdjust();
});
Is there any such event for android devices?
There is a great js ready for this called Hammer JS
There is also another great jQuery plugin called TouchSwipe.
I'm making a mobile app with PhoneGap. I've got this--
function preventBehavior(e)
{
e.preventDefault();
};
document.addEventListener("touchmove",preventBehavior, false);
You know how you can drag a page a tiny ways off of the smartphone screen by dragging it, and then it pops right back when you release it? And all you see behind it is black? That's what this code is meant to prevent. And it does.
But it's also preventing all standard scrolling, such as scrolling through a list. Does anyone know a solution?
An easy solution for Cordova 1.7+
Locate Cordova.plist in your Xcode project.
At the top it will say “UIWebViewBounce“. Set this to NO.
you have two options:
iScroll - Super effective in giving this effect. Granted it does have it's limitations.
-webkit-overflow-scrolling:touch; a new css method introduced in ios 5 it works well but again has it's limitations within phonegap.
Personally I use iScroll for phonegap apps, it works great if you don't have a super large list of items you are scrolling. If you're looking for a more native way I would suggest the overflow-scrolling method, this has proven to cause some strange effects in the webview. Phonegap uses webview vs mobile safari so your support differs a bit.
iScroll - http://cubiq.org/iscroll-4
webkit-scrolling - http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/
You should add this in your head tag: (No need of your listener code now)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
This basically disables the scaling (zoom in/out) and that drag effect which you do not want. So the page will not be scrolled but still touchmove event can be tracked.
I need some help. I am trying to work on a mobile web page. What i'm trying to do is "capture" when the user does a zoom in/zoom out action. That is, when they put two fingers on screen and separate or close their fingers together. I looked at jquery mobile and didn't see it.
So specifically can I attach a javascript function to a pinch/zoom event in a mobile device?
Any help would be greatly appreciated.
hammer.js https://hammerjs.github.io/ is one of the best javascript library for such problems..
Zepto is a jquery compatible library for mobile and provides handlers for pinch events. Unfortunately, they are listed as iOS only. (See "Touch Events")
Synopsis:
$('some selector').pinch(function(){ ... });
$('some selector').pinchIn(function(){ ... });
$('some selector').pinchOut(function(){ ... });
Touchy is a jQuery plugin that provides support for pinch, drag, swipe, longpress, rotate. It works on any browser that implements touchstart, touchmove and touchend. Future versions will also support IE10.