Problem is that swipeleft/swiperight event is trigger when I want vertical scroll.
We are using jQuery mobile 1.1.0 version and jQuery 1.7.1.
and code is:
$(document).delegate('#quizResumePage', 'swipeleft swiperight', function (event) {
event.stopImmediatePropagation();
if (event.type == 'swipeleft') {
$('#btnnext').trigger('click');
} else if (event.type == 'swiperight') {
$('#btnprevious').trigger('click');
}
event.preventDefault();
});
Then why swipe event trigger when I want to scroll the page?
This problem is occur in the Samsung galaxy android 2.3.5...
Can any one help me for this issue?
You can control how the swipe event works changing the values of the following object
$.extend($.event.special.swipe,{
scrollSupressionThreshold: 10, // More than this horizontal displacement, and we will suppress scrolling.
durationThreshold: 1000, // More time than this, and it isn't a swipe.
horizontalDistanceThreshold: 30, // Swipe horizontal displacement must be more than this.
verticalDistanceThreshold: 75, // Swipe vertical displacement must be less than this.
});
place it on your code before listening to the swipes. Change for example the verticalDistanceThreshold to 15 and the durationThreshold to 500 that will help to reduce the false positive.
On the other side, in your code you're triggering the click event on your buttons, while that works, a better approach would be to call directly the method that executes next/previous actions.
Good luck!
Related
I have set up a swipeleft event in my app to move between fields of a form. All of the fields are dynamically generated, so I'm not swapping between pages, I'm clearing and re-generating all the DOM elements. The problem is the swipe event only fires every other time I swipe on the page or if I touch or tap anything on the page.
Here's the code that sets up the events:
$(document).delegate("#scorePage", "pageshow", function() {
$.event.special.swipe.scrollSupressionThreshold = 10;
$.event.special.swipe.horizontalDistanceThreshold = 30;
$.event.special.swipe.durationThreshold = 500;
$.event.special.swipe.verticalDistanceThreshold = 75;
$('#divFoo').on("swipeleft", swipeLeftHandler);
$('#divFoo').on("swiperight", swipeRightHandler);
tableCreate(traits[0].keyboardID);
});
For context, tableCreate is putting a dynamically generated table into divFoo that contains information a user can pick from. Here's the event code itself:
function swipeLeftHandler() {
$("#divFoo").empty();
traitIndex++;
tableCreate(traits[traitIndex].keyboardID);
}
Why is my swipe event only firing every other time there is a swipe on the page?
Primarily testing on Android right now, if that makes a difference.
Edit I'm using JQuery Mobile version 1.4.4
I figured out a way around this problem by simply rolling my own implementation of these events. There's some sample code on how to do something similar here:
https://snipt.net/blackdynamo/swipe-up-and-down-support-for-jquery-mobile/
If anyone else uses this code to fix my same problem, make sure to be aware that the article is implementing swipeup and swipedown so you will have to adapt it. In the end, I'm not entirely sure about the differences between this code and the actual implementations of swipeleft and swiperight, but this works consistently so I'm cutting my losses and going with it.
I'm trying to prevent scrolling of the body content when reaching the end of the scrollable content in a fixed div.
It was working really well in iOS, and still is, and well enough in Chrome on Android.
But when we did some testing a few days ago, suddenly it worked really bad in Chrome. It might be related to the release of Chrome 36 on the 14 of august.
When reaching the bottom of the fixed div, and I'll continue to "scroll" without stopping or lifting my finger, the body starts to scroll, even though it should be prevented by my script, and generated the following error message:
Ignored attempt to cancel a touchmove event with cancelable=false, for
example because scrolling is in progress and cannot be interrupted.
Is there anyway around this? Or some other trick I can use?
The following code is used:
var scrolling = false,
ts = null;
$('body').on('touchstart.scrollable', '.a', function(e) {
// Only execute the below code once at a time
if (!scrolling) {
scrolling = true;
if (e.currentTarget.scrollTop === 0) {
e.currentTarget.scrollTop = 1;
} else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
e.currentTarget.scrollTop -= 1;
}
scrolling = false;
}
ts = e.originalEvent.touches[0].clientY;
});
$('body').on('touchmove.scrollable', '.a', function(e) {
//If there is no scrollabe content we disable default event
var te = e.originalEvent.changedTouches[0].clientY,
direction = ts > te ? 'down' : 'up';
$container = $('.a');
$content = $('.b');
if ($content.height() <= $container.height()) {
e.preventDefault();
console.log('Default prevented');
} else if ($container.scrollTop() <= 1 && direction == 'up') {
e.preventDefault();
console.log('Default prevented');
} else if ($container.scrollTop() > 0 && ($container.scrollTop() + $container.height() >= $content.height() - 1) && direction == 'down') {
e.preventDefault();
console.log('Default prevented');
}
/* Keep from bubbling */
e.stopPropagation();
});
Please see the following example for complete source and to test:
Link to JSBin (They seems to expire after 24 hours) Please press File -> Clone if that has happend, and then view in fullscreen)
Thanks!
I had this issue recently on android. very frustrating, especially as the debug affects what happens.
In the end, I ended up putting a transparent div over the scrollable div and writing my own touch handlers on it that passed down the delta between the touchstart and touchmove event Y position to the scrollTop() function of the scrollable div (using jquery). This allowed me complete control of the scroll.
I thought I had it all worked out, then it stopped working again.
I added a wrapper around the menu with overflow-y: scroll and 10000px height.
Since the scroll bubbles I assumed it was gonna bubble to my wrapper and catch the scrolling there. But no, it goes straight to body and scrolls it. Even though it has static height to reflect the screen height and overflow: hidden!important.
It was however working when I had the wrapper selected in the DOM tree while debugging in Chrome. I no longer receive the error message when it's selected either.
It also works if you first scroll fast, let go, and let the scroll bubble to the body and continue scrolling until it stops by it self. Next time I scroll the prevent-method works and I don't receive the error message
I have no idea what the fudge is going on...
Calling preventDefault on touchmove while you are scrolling is not working in Chrome. To prevent performance issues, you cannot interrupt a scroll.
Try to call preventDefault() from touchstart and everything should be ok.
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')
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 am new to jQuery Mobile 1.4.5, when I try to implement changePage() triggered by swipeleft, it works perfect with following code:
$("#mypage").on("swipeleft", function(e){
log("swipeleft");
if(event.handled !== true) // This will prevent event triggering more then once
{
$.mobile.changePage('#mypage2', {transition: "slide"});
event.handled = true;
}
return false;
});
However, once the changePage() event is triggered, it can't go back until the next page is completely showed. I was wondering is it possible to do like other "swipe to change page" function e.g. Facebook slide to show friend list. I can slide to show part of target page, and the edge of page is just followed where my finger is. Instead of changing whole page
Thanks for your help.