Response title
This is preview!
Move this topic
setting the thresholds for swipeleft and swiperight
in jQuery Mobile
•
11 years ago
Is it possible to set thresholds for the swipeleft and swiperight event?
I want to set the scroll supression to 0 pixels and the horizontal distance threshold to something higher than the default 30 pixels.
1
Replies(5)
Or is it posible to detect the direction of swiping using the standard swipe event?
Leave a comment on Diederik's reply
Just a bump message.
Anyone has any idea how I can fix this. I've added a swipeleft (and swiperight) event to a container div, but it makes vertical scrolling almost impossible because of the 30 pixels horizontal threshold.
You can test it on ipad, surfing to m.gents.be
Leave a comment on Diederik's reply
Not sure how you could set/reset horizontalDistanceThreshold because you would have to have both values active at the same time.
Without thinking anything through in detail, how about:
1. Difficult
- leave horizontalDistanceThreshold for JQM to enable normal vertical scrolling
- setup your_Own_Scroll_DistanceThreshold to capture swipeleft/right and trigger a change in your page navigation.
2. Medium
- try using the pagination plugin.
- this would mean you had to setup standalone .pages for "projects", "about"...
- which the plugin would let you swipe in between
- CON: you could keep the footer persistent but not the header, which would also transition.
3. Easy
- wait for my plugin to finish (will be a while)
- make your header&footer global, make #pages a fullwidth panel and turn your class .pages elements into JQM pages.
- trigger changePage on swipeleft/right
Without thinking anything through in detail, how about:
1. Difficult
- leave horizontalDistanceThreshold for JQM to enable normal vertical scrolling
- setup your_Own_Scroll_DistanceThreshold to capture swipeleft/right and trigger a change in your page navigation.
2. Medium
- try using the pagination plugin.
- this would mean you had to setup standalone .pages for "projects", "about"...
- which the plugin would let you swipe in between
- CON: you could keep the footer persistent but not the header, which would also transition.
3. Easy
- wait for my plugin to finish (will be a while)
- make your header&footer global, make #pages a fullwidth panel and turn your class .pages elements into JQM pages.
- trigger changePage on swipeleft/right
Leave a comment on frequent's reply
You can't configure swipeleft and swiperight differently out of the box. However, from commit https://github.com/jquery/jquery-mobile/commit/7b1966c8506b10ab357f446f18637e11bdced6ea the framework supports the following swipe configuration thresholds which you can configure in your mobileinit handler:
$.event.special.swipe.scrollSupressionThreshold
$.event.special.swipe.durationThreshold
$.event.special.swipe.horizontalDistanceThreshold
$.event.special.swipe.verticalDistanceThreshold
These modify the swipe thresholds for both left and right swipe events.
$.event.special.swipe.scrollSupressionThreshold
$.event.special.swipe.durationThreshold
$.event.special.swipe.horizontalDistanceThreshold
$.event.special.swipe.verticalDistanceThreshold
These modify the swipe thresholds for both left and right swipe events.
Leave a comment on bagman's reply
All good suggestions. Thanks!
But I noticed that on IOS4, you can't scroll anyways. There's a bug in mobile safari that makes scrolling and using positioning of elements in combination impossible. Scrolling was disabled on IOS4. The sollution to that problem seems to solve my problem as described above.
I've implemented iscroll (http://cubiq.org/iscroll-4). It made scrolling possible for IOS4 devices. And as a bonus, it made scrolling smooth. And solved the wiping problem I had.
Thanks for the effort anyways!
Leave a comment on Diederik's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Diederik's question