I'm using Touchswipe to trigger events based on swipe right and swipe left. After a lot of testing, i found that touchswipe is not working on android stock browsers since touchswipe is not firing swipe events on stock browsers. Any work around for this?
Code to trigger:
$(function() {
//Enable swiping...
$("#content").swipe( {
//Generic swipe handler for all directions
swipe:function(event, direction, distance, duration, fingerCount) {
if(direction == "left"){
}else if(direction == "right"){
}else if(direction == "down"){
// event.preventDefault()
}
},
threshold:0
});
});
Well, after a lot of issues i found that swipe event on android STOCK browsers can't be triggered with code from an external Js file but works if put on same html file. Weird but works.
Have you tried using jQuery mobile to support the swipe functionality. The developer API is given here.
The difference here, is that instead of calling $(document).ready(function() ...) we can call: $(document).bind('pageinit')
Related
Situation: hammer.js 2.0.4, jQuery 2.1 on a Cordova cross-platform mobile app. I was running into well-documented (for example) issues with delay of click events, so I thought I'd try hammer.js for this. It works beautifully on my iPad, but on my Android phone (Android v4.4) is dreadful: very slow to respond, and frequently misses taps entirely.
I implemented my own small tap detection (using mouseUp events) and it performs much better than Hammer.js on my Android (but terribly on my iPad).
So my question is: are there known issues for hammer.js on Android, or known workarounds? I'd really prefer not to conditionally use two different approaches based on platform, especially when there is no conceivable way for me to test all possible mobile platforms.
Example of the hammer.js tap code; nothing very interesting going on:
$(".menuitem").each( function(i, elem) {
var mc = new Hammer.Manager(elem);
mc.add(new Hammer.Tap());
mc.on("tap", action);
});
In addition there is a top-level swipe recognizer that covers the entire page:
var swipelistener = new Hammer($("body")[0], {
recognizers: [[Hammer.Swipe,{ direction: Hammer.DIRECTION_RIGHT }]]
});
swipelistener.on("swipe", swipeRight );
In total there will be fewer than two dozen elements responding to tap events, and no overlapping or nested elements. I thought it might have something to do with the swipe recognizer overlapping the tap recognizers, but removing the swipe listener didn't change the tap behavior at all.
You need to play with the settings of each recognizer.
hammertime.get('swipe').set({
direction: hammer.DIRECTION_ALL, threshold: 1, velocity: 0.1
});
This worked for me for swipe on 4.1.1
Would be really helpful if someone could write some example code for tap as I'm still fiddling with that.
Also, you don't need mc.add as the Manager by default has all the recognizers. You only need to use .add once you've manually removed (using mc.remove) one.
If you are unsure what settings any of the recognizers have, look on their website eg http://hammerjs.github.io/recognizer-swipe/ shows that I could set direction, threshold and velocity etc as per the code above.
As I can see you need to detect swipe on entire screen without any specific options. Maybe cordova-android-gestures (only for Android) helps you? This plugin "catches" gestures on total device surface. So, for detect swipes:
//check the platform
if (device.platform=="Android") {
MegaduckGestures.swiper(function(direction){
switch (direction) {
case 'rightSwipe':
//do your staff
break;
case 'leftSwipe':
//do your staff
break;
default: break;
}
});
}
else {
//use your iPad approach
}
And for handling tap on menu item:
$(".menuitem").each( function(i, elem) {
//check the platform
if (device.platform=="Android") {
MegaduckGestures.swiper(function(direction){
if (direction=='singleTap') {
//do your staff
}
});
}
else {
//use your iPad approach
}
});
I've tried both techniques in this answer to get a "dragging touch highlight" across elements in my PhoneGap App (testing on Android).
Here's my JSFiddle of the touchmove approach
$("td").bind("touchmove", function(evt){
var touch = evt.originalEvent.touches[0]
highlightHoveredObject(touch.clientX, touch.clientY);
});
Here's my JSFiddle of the vmousemove approach
$("#main").bind("vmousemove", function(evt){
$('.catch').each(function(index) {
if ( div_overlap($(this), evt.pageX, evt.pageY) ) {
$('.catch').not('eq('+index+')').removeClass('green');
if (!$(this).hasClass('green')) {
$(this).addClass('green');
}
}
});
});
Both work perfectly when emulating the app from desktop browser. Both work when viewing the JSFiddles from my Android tablet browser. But in the installed app on the tablet, it doesn't work. Instead of an updating highlight as I drag across the elements, all I get is a highlight on the first-touched event. The same for both methods.
Any ideas what's going on?
A comment on this question has an intriguing suggestion that "If you are running on android you also need to cancel the touchmove event to get new ones while touching. Don't ask me why...". Does that ring a bell, and if so, how would I "cancel the touchmove event to get new ones" with either of these approaches?
Alternately, has anyone successfully done a "dragging highlight" effect on a PhoneGap app, and would you care to share your technique?
I'm using phonegap (cordova 2.8), and android 4.2.1,
I use as frame works: knockout, & jquery mobile.
The app is based on http://propertycross.com/jquery-mobile/
I get the following funny behavior:
when clicking on a button that moves to another screen #2,
if there is a button in #2 screen at the same location,
then it get clicked as well...
The only solution I found is to wrap the code that change the screen with setTimeout:
setTimeout(function() {
application.navigateTo(viewModel);
},600);
This solve the problem but slow down the app...
This is actually unfortunate since the phonegap is already too slow...
Thanks.
There are two things you can do:
1) e.stopPropagation(), e.preventDefault()
phopkins describes this here:
jQuery mobile tap event triggered for twice
I'll elaborate, as this was a major issue for me. This applies to any of the tap, click, vclick and probably other events.
Your event functions should have stopPropogation() and preventDefault() called, like so:
$('#selector').tap(function(e) {
//your code here
e.stopPropagation();
e.preventDefault();
});
This helps, however, I found that you could still get the "phantom" click.
2) Bind the event to the page, not the button.
That way it's not bound to the next page.
For example, for a page with id='myPage' and a button with id='myBtn':
$('#myPage').on('tap', '#myBtn', function(e) {
//your code here
e.stopPropagation();
e.preventDefault();
});
I have built a slide show and right now I am trying to add swipe support that cross platform compatible. currently my jquery hammer js build works great on ios but not in android 4. in android my slide show will run until I try to swipe to another slide, then it stops working. Its a pretty simple setup. I only care about left and right swipe and want the default vertical scroll.
var hammertime = $('#slideshow').hammer();
hammertime.on("swipeleft", function(ev) {
ev.gesture.preventDefault();
swipeLeft();
});
hammertime.on("swiperight", function(ev) {
ev.gesture.preventDefault();
swipeRight();
});
slide will work perfectly in ios without the preventDefault() function, I put it in for android as it has given some success for android in the past, but this time yielded no extra results. Any ideas on whats causing android not to work at all here?
try this.
I found that hammer.js recoginze most of swipe touch as drag.
var hammertime = $('#slideshow').hammer();
hammertime.on("swipeleft dragleft", function(ev) {
ev.gesture.preventDefault();
swipeLeft();
});
hammertime.on("swiperight dragright", function(ev) {
ev.gesture.preventDefault();
swipeRight();
});
I want to create a horizontal swiping effect using jQuery Mobile. After doing a little bit of research, I found out that ViewPager, which is generally found in the app details page of Android Market, does what I want. In the page specified the author describes it along with code in Android, but I wanted to know if there is an equivalent plug-in or feature in jQM.
I like SwipeJS, it's lightweight and I like the one-to-one slide factor it uses (when you slide your finger across the element, it moves at the same rate).
There is also iScroll 4 that works pretty well (it seems to be more difficult to setup than SwipeJS).
You can however utilize the built-in swipe events in jQuery Mobile. You can bind to the swipeleft or swiperight events for the data-role="page" element(s) and navigate the user to the correct page based on the current page:
$(document).delegate('#page-two', 'swipeleft', function () {
//next page
$.mobile.changePage($('#page-three'));
}).delegate('#page-two', 'swiperight', function () {
//prev page
$.mobile.changePage($('#page-one'), { reverse : true });
});
Here is a demo: http://jsfiddle.net/fFGvD/
Notice the { reverse : true } object being passed as the option object to the changePage() function so the animation will play in reverse.