I have a UIWebView which loads an html page that supports swipe left/right gesture to switch between content. This gesture works well when the page is opened from a desktop browser but doesn't work at all when loaded from a UIWebView.
jQuery Swipe
FOR IPHONE & IPOD TOUCH MOBILE APPS
iPhone and iPod Touch swipe gesture support using Safari JavaScript for onTouchStart, onTouchMove, onTouchEnd and onTouchCancel.
This plugin uses Mobile Safari's built in touch events to allow jQuery binding of swipe events to any DOM element. You can override the swipeLeft and swipeRight defaults functions to create your own custom process when the gesture is detected.
This is the plugin used for swiping: http://archive.plugins.jquery.com/project/swipe
Did anyone else had this issue?
Any help would be much appreciated!
//For Left Swipe
UISwipeGestureRecognizer * swipeleft=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:#selector(swipeleft)];
swipeleft.direction=UISwipeGestureRecognizerDirectionLeft;
[self.view addGestureRecognizer:swipeleft];
//For Right Swipe
UISwipeGestureRecognizer * swiperight=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:#selector(swiperight)];
swiperight.direction=UISwipeGestureRecognizerDirectionRight;
[self.view addGestureRecognizer:swiperight];
Methods
-(void)swipeleft{
}
-(void)swiperight{
}
Try this one..
Related
Here is my app, running locally. My touchstart and touchend events fire correctly in the desktop Chrome mobile simulator, as well as on a friend's Android, but in Safari they do nothing. I have the viewport meta tag. It seems as though Safari is not registering as a mobile browser/device and, therefore, not registering touches.
Here is the file that I am working with the touch events. (It wouldn't format correctly here.)
(Swipe right to mark for deletion, swipe right again to confirm. Swipe left to mark complete.)
my application is using the Touch API to detect touch events in JavaScript. Example:
$(".element").on("touchstart", function(event){
alert("TRUE");
});
This works on any touch device with any browser like Android or iOS, however it doesn't work in MS Edge on a Windows 10 Tablet with or without conntected keyboard. The API seems to be supported: Compatibility list. However, I've tested: 'ontouchstart' in window and this returns false on this device. Furthermore mousedown seems to get fired.
What is going on here? What can I do to fire touch events on a Windows 10 tablet?
I would like to keep the event only for touch devices. Switching to the Pointer Events API would include also Desktop devices and that is not what I want.
for touch API, you have to activate a flag on Edge : in the address bar, enter about:flags and press enter. In the section Touch, you can enable touch events with the corresponding dropdown
Did you enable custom touch handling ? You can do it with the following css snippet (on the body tag or just a container for geastures) :
-ms-touch-action: none;
Next, touch API is a webkit feature (maybe there is an error in CanIuse ?). IE and Edge have a similar feature known as Pointer API. But you can use a polyfill library like this :
https://github.com/CamHenlin/TouchPolyfill
Try using the pointerdown event. Some (much) more information. As you can see, touchstart is triggered by Edge but not in all configurations, when a keyboard is attached/paired for example, no touchstart.
I'm using JQuery Mobile for recognizing swipe events and it works well. Events fire on Windows Mobile (7.5 in my case), but what also fires is the web browser's default events for navigating the browsing history. Swiping right turns back a page. How can I prevent this default behavior?
I tried the preventDefault() and it didn't help here.
It will deactivate the touch:-
Add CSS snippets:
*{
touch-action: none;
}
But to reactivate the touch event only on the some zone, to allow the player to play or active the touch
To activate for certain places add this :-
#activetouch{
touch-action: chained;
}
Reference:https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
Windows Phone 7/IE9 does not support mousemove event so there is not way for jquery mobile to recognize swipe event.
Some mobile frameworks like Apache Cordova (PhoneGap) provide workaround for this by adding special shim between native (silverlight) touch events and web browser control to fix missing mouse events. Demo
This works fine on Windows Phone 8 since it supports mousemove.
I'm trying to figure out how to add event listeners for windows touch events (like a big touch screen monitor, not mobile) in Windows 7 and can't seem to make things like touchstart touchend etc. trigger in any browser. Do these events just not fire in a browser like they do on an iPad?
As far as I know, those events are included only in some mobile navigators (not all, see http://www.quirksmode.org/mobile/tableTouch.html ). I don't think you can handle them on a standard browser like ff/ie/chrome. You'll have to use mousedown & cie.
Take a look at the v2 branch of hammer.js http://eightmedia.github.com/hammer.js/v2/, it's a nice touch event abstraction layer for iOS, Android, BlackBerry and also includes support for Windows touch events.
I have a page that uses JQuery UI; in particular the Sortable interaction.
The page works fine for desktop web browsers with mice, however I can't get the drag-drop functionality to work on Mobile Safari on the iPhone. Any dragging action simply scrolls the page.
The functionality on my page is extremely similar to the Sortable Empty-Lists demo on the JQuery UI site. This page also doesn't work on the iPhone.
Is there any way to get the drag-drop functions working on the iPhone?
According to the Mobile Safari docs drag and drop is not supported, but it can be simulated. Since basically dragging your finger along will scroll the browser you will have to disable this. That can be done like this:
$(document).bind('touchmove', function(e) {
e.preventDefault();
}, false);
Otherwise the event you will have to handle are touchstart, touchmove and touchend.
This is a demo of jquery ui 1.9pre:
https://dl.dropbox.com/u/3872624/lab/touch/index.html
The jquery.mouse.ui.js file is working great for me.