Tutorial: Swipe function with JavaScript

This tutorial explains how to create a simple JavaScript swipe function with a specific minimal swipe length and swipe-able area as requirement.

If you want your website is smarter on mobile devices, the following swipe function in JavaScript could help you realize this. At the end of the article is the full code.

Get the window width and set the swipe-able area

In most cases you don't want either the header or the footer is swipe-able. So first we set the swipe-able area to our HTML main-tag. Furthermore we get the window width and set the minimal length for a swipe depending on the window width, while we prevent a too big length by setting a maximal length:

var SwipeArea = document.querySelector("main");
var SwipeWidth = ((window.innerWidth)/2);
var SwipeWidthMax = 320;
	
if (SwipeWidth > SwipeWidthMax) {
	SwipeWidth = SwipeWidthMax;
}

For sure you can take another area for swipe or change the swipe length to a value that fits for you.

Add the EventListener for swiping and set variables

For our simple function we need the EventListeners for the start and the end of the swipe:

SwipeArea.addEventListener("touchstart", SwipeStart, false);
SwipeArea.addEventListener("touchend", SwipeEnd, false);

Furthermore we have to set the basic variables:

var SwipeStartX = null;
var SwipeEndX = null;
var SwipeLengthX = null;
	
var SwipeStartY = null;
var SwipeEndY = null;
var SwipeLengthY = null;

Calling the swipe functions

At the end we have to call the swipe functions for start and end of every swipe and get their exact positions to calculate the swipe lengths. If the swipe in x-direction is longer than in y-direction we go on and compare the swipe length with our minimal swipe length:

function SwipeStart(evt) {                                         
	SwipeStartX = evt.changedTouches[0].clientX;
	SwipeStartY = evt.changedTouches[0].clientY;
};

function SwipeEnd(evt) {
	SwipeEndX = evt.changedTouches[0].clientX;
	SwipeEndY = evt.changedTouches[0].clientY;
		
	SwipeLengthX = SwipeStartX - SwipeEndX;
	SwipeLengthY = SwipeStartY - SwipeEndY;
		
	if (Math.abs(SwipeLengthX) > Math.abs(SwipeLengthY)) {
		if (SwipeLengthX > SwipeWidth) {
			/* left swipe */
		}
		else if (SwipeLengthX < -SwipeWidth) {
			/* right swipe */
		}
	}
};

Now you can add your preferred action for right or left swipes.

Full code

var SwipeArea = document.querySelector("main");
var SwipeWidth = ((window.innerWidth)/2);
var SwipeWidthMax = 320;
	
if (SwipeWidth > SwipeWidthMax) {
	SwipeWidth = SwipeWidthMax;
}

var SwipeStartX = null;
var SwipeEndX = null;
var SwipeLengthX = null;
	
var SwipeStartY = null;
var SwipeEndY = null;
var SwipeLengthY = null;

SwipeArea.addEventListener("touchstart", SwipeStart, false);
SwipeArea.addEventListener("touchend", SwipeEnd, false);

function SwipeStart(evt) {                                         
	SwipeStartX = evt.changedTouches[0].clientX;
	SwipeStartY = evt.changedTouches[0].clientY;
};

function SwipeEnd(evt) {
	SwipeEndX = evt.changedTouches[0].clientX;
	SwipeEndY = evt.changedTouches[0].clientY;
		
	SwipeLengthX = SwipeStartX - SwipeEndX;
	SwipeLengthY = SwipeStartY - SwipeEndY;
		
	if (Math.abs(SwipeLengthX) > Math.abs(SwipeLengthY)) {
		if (SwipeLengthX > SwipeWidth) {
			/* left swipe */
		}
		else if (SwipeLengthX < -SwipeWidth) {
			/* right swipe */
		}
	}
};

Questions?

If you have further questions, please write me an e-mail at ed.nnamttug-ppilihp@liam and I will try to help :)