TouchSwipe is a jQuery plugin made by Matt Bryson. Basically this plugin allow mobile device users to navigate pages simply swiping and pinching using fingers. It's highly customizable and it works well on every mobile device I've tested. On the other way, this plugin on desktop devices is almost annoying; the main problem is (according to a confirmed bug on GitHub) that if You install touchSwipe jQuery plugin on your site You won't be able to select text on a page anymore. Experienced on this blog. Definetely not cool, expecially if You have pages with terminal commands like mine, that are supposed to be selected or copied. This is a really cool plugin and I don't want to abandon it. So I made a little workaround. It's nothing official but for me works well and it's very simple to deploy. Let'go deep!
The function isMobile() returns true or false. You can use it to trigger the initialization of TouchSwipe in this way:
This is the script that uses the classes of TouchSwipe plugin in which You must specify two links. One for the previous page and one for the next page. Other important thing is the parameter threshold, which I will discuss in more detail shortly.
You need to set this value not to small, not to big. A small value can become the user experience a nightmare, because if You are scrolling down a page, the plugin can read this moviment like a swipe left or right, changing the page or article You're reading! (True story, bro). A big value can make TouchSwipe useless: an user is forced to make innatural swipe moviment to make the plugin working. In my direct experience a good value is 150px. This value is a good compromise in the middle of these situations. Enjoy your TouchSwipe plugin!
mattbryson/TouchSwipe-Jquery-Plugin GitHub repo
Disable TouchSwipe on desktop
The problem of text selection inability affects only desktop devices, because on mobile devices, using Google Chrome, You are able to select text by long press on screen; so, the first thing to do is disable TouchSwipe when the site is loaded from a desktop device. This is made possible by a simple function:
function isMobile() {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
}
The function isMobile() returns true or false. You can use it to trigger the initialization of TouchSwipe in this way:
if ( isMobile() == true ) {
$(function() {
$("#swipeArea").swipe( {
swipeLeft:function(event, direction, distance, duration, fingerCount) {
window.location.href = "Link Previous page";
},
swipeRight:function(event, direction, distance, duration, fingerCount) {
window.location.href = "Link Next page";
},
threshold:150
});
});
}
This is the script that uses the classes of TouchSwipe plugin in which You must specify two links. One for the previous page and one for the next page. Other important thing is the parameter threshold, which I will discuss in more detail shortly.
Fine tuning the threshold
Threshold is a parameter whose value is a number expressed in pixel. This number indicate the distance in pixel of a swipe moviment that activate the action (windows.location.href in my case). If You set to 0, any swipe moviment will activate the action.You need to set this value not to small, not to big. A small value can become the user experience a nightmare, because if You are scrolling down a page, the plugin can read this moviment like a swipe left or right, changing the page or article You're reading! (True story, bro). A big value can make TouchSwipe useless: an user is forced to make innatural swipe moviment to make the plugin working. In my direct experience a good value is 150px. This value is a good compromise in the middle of these situations. Enjoy your TouchSwipe plugin!
mattbryson/TouchSwipe-Jquery-Plugin GitHub repo
X
THE END
THE END