Forum Academy Marketplace Showcase Pricing Features

Build Swipe Feature by yourself without any plugin

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.


image

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

14 Likes

Very clever and useful! Thanks a lot for sharing @khanhquocnguyen :+1:t2:

Thanks!

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…

1 Like

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?)

@khanhquocnguyen Thank you man! Thats helpful so much :+1:

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)

Very cool! Kudos

Thank you!

Is there a way to make it work in a repeating group?

Use the current cell’s index as part of the ‘YOURFUNCTION’ portion and it should

1 Like

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.