Swiping in jQuery

What is Swiping ?

Swiping is separate from other gestures such as flicking and scrolling. a swiping gesture allows users to “slide the elements to complete actions upon passing a threshold.” It mimics the analog motion of swiping a card off of the top of a deck.

In practice, this is usually achieved with one finger, often the thumb. Swiping is particularly amenable to the so-called “thumb zone” proposed by Steven Hoober in his 2011th-year. Hoober found that nearly 50% of mobile phone users preferred to navigate using a single thumb. Thus, accessibility of app features to that finger is crucial; users prefer not to have to stretch their thumbs or readjust their grip in order to execute a function or an action. The approximately crude movement of the swipe is perfectly aligned with this tendency.

Swiping concept is very crucial in terms of mobile app development and tablet-focused apps, where most of the things will work on the swiping concept. For Example, Amazon and Flipkart use swiping for the Banner section and it is helpful for the categories of their products. In Modern Web development, all Websites are responsive for all kinds of devices. so here also Swiping will get a Big Thumbs Up!

Let’s Get started!!

just paste the below HTML to a blank page and test the below codes.

Here is the HTML.

<div data-role="page" id="pageone">
<div data-role="header">
<h1>The swipeleft Event</h1>
</div>

<div data-role="main" class="ui-content">
<p style="border:1px solid black;margin:5px;">Swipe me in the left direction - do not swipe outside the border!</p>
</div>

<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>

In order to see how to move our Swiping effect, we have written alert() with the direction name.

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pageone",function(){
$("body").on("swiperight",function(){
alert("You swiped right!");
}); 
$("body").on("swipeleft",function(){
alert("You swiped left!");
});
});
</script>

Here is the downloadable File.

Note : We have tested this in the touch screen device, It seems there is some issue with swiping. if you found this please write it in the below comment box.

Happy Coding 🙂