To enhance the user experience when they use the touch screen, maybe you will need to detect the swipe action of the user.
This can be done by using some plugins, but do it by yourself will give you all control of your application (and fun). Let’s get started.
Say that you want something like this:
- When the user swipes this element, do something.
I say: When the user swipes the red element, go to my Upwork Profile.
First, create a page and make sure you unchecked the “Fix width” option so you can do swipe action on that page easily:
Create the red element and assign swipe-detect id to the red element.
Let do a trick here: Create a hidden button, assign swipe-button to it, and make the work-flow that opens my Upwork Profile link. After that, hide this button by making it smaller (example: 1px). Please note that the following code can not execute if you make this button invisible.
Final step: Put an HTML element somewhere on your page and add the following code:
<script>
$(document).ready(function () {
// Swipe Up / Down / Left / Right
var initialX = null;
var initialY = null;
function startTouch(e) {
initialX = e.touches[0].clientX;
initialY = e.touches[0].clientY;
};
function moveTouch(e) {
if (initialX === null) {
return;
}
if (initialY === null) {
return;
}
var currentX = e.touches[0].clientX;
var currentY = e.touches[0].clientY;
var diffX = initialX - currentX;
var diffY = initialY - currentY;
if (Math.abs(diffX) > Math.abs(diffY)) {
// sliding horizontally
if (diffX > 0) {
// swiped left
console.log("swiped left");
button.click();
} else {
// swiped right
console.log("swiped right");
button.click();
}
} else {
// sliding vertically
if (diffY > 0) {
// swiped up
console.log("swiped up");
} else {
// swiped down
console.log("swiped down");
}
}
initialX = null;
initialY = null;
e.preventDefault();
};
var container = document.querySelector("#swipe-detect");
var button = document.querySelector("#swipe-button");
container.addEventListener("touchstart", startTouch, false);
container.addEventListener("touchmove", moveTouch, false);
});
</script>
Finished, try it here (note: open in the device with touch screen): https://muondat.bubbleapps.io/version-test/page
).