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.
I am trying to use this on an image to create let users swipe through different images of a post (like Instagram). Is it possible to create different workflows for different directions? (swipe-left / swipe-right). I had a look at the html code, but was not able to find the answer…
UPDATE: I was able to do it by creating 2 buttons & 2 html elements.
I called one Button “swipe-buttonR” & the other “swipe-buttonL”.
Then I removed the row “button.click();” on where it says swiped left/ swiped right - as needed.
Then I also changed this row (at the bottom) of each html element: “var button = document.querySelector(”#swipe-button");" to “swipe-buttonR” / “swipe-buttonL”
This way it triggers the button you want and you can set different workflows for each (Y)
And another upcoming quest: Is it possible to also include a double-click function - and send the action to a hidden button? (For example to like a post?)
double-click can be done in html element, triggering a bubble function…
put a javascript bubble function in the page (Ex YOURFUNCTION)
and in html element put: "ondblclick=“bubble_fn_YOURFUNCTIO();”
the html element will trigger the javascript function that you can setup the workflow
(at least it is what I’ve made following a video tutorial, I’m very bad at programming haha)
Great feature, but is there a way to only apply the swipe function to horizontal swipes but keep vertical swipes the same (just scrolling the page up and down)?
I used the tip provided by @maze and the left and right swipes work perfectly, but now my users can not scroll down or up the page if they start the vertical scroll on the element (which takes up a large part of the screen).
I tried documenting out some of the vertical attributes but didn’t have much luck.
Great feature @khanhquocnguyen. I got it working with your double button solution too @maze (to allow a back-and-forth sliding feature ).
I have a question though… Is there anything that might mess with running the html on a specific page? The feature works well when I build it on a new page. However, when I incorporate it in my app, it doesn’t work. No swipes are detected whatsoever…
You need to place the html on EVERY page you want to use it. Alternatively you can go to settings - SEO settings - and put it into your header. Probably that’s the problem
Just following up to see if anyone has a solution for using the above code for horizontal scrolling but ignoring vertical scrolling so that users can continue to scroll up and down the page like normal.
Here’s the code that enables vertical scrolling yet tracks horizontal scrolling. It has been adapted as maze pointed out earlier to two buttons (left + right scrolling), so you’ll add the IDs “swipe-button-right” for swipe right action, and “swipe-button-left” for swipe left.
The only change I made was moving the line e.preventDefault(); from the end of the moveTouch function to inside the condition block for detecting horizontal swipes.
<script>
$(document).ready(function () {
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");
button2.click();
}
e.preventDefault(); // Moved this here
} else {
// sliding vertically
if (diffY > 0) {
// swiped up
console.log("swiped up");
} else {
// swiped down
console.log("swiped down");
}
}
initialX = null;
initialY = null;
};
var container = document.querySelector("#swipe-detect");
var button = document.querySelector("#swipe-button-right");
var button2 = document.querySelector("#swipe-button-left");
container.addEventListener("touchstart", startTouch, false);
container.addEventListener("touchmove", moveTouch, false);
});
</script>
).