Tomasz Tomasz - 4 months ago 25
CSS Question

Swipe show wrong side

I want to add swipe action (left,right,top,bottom) and show alert about direction swipe.

Code for this:



var touchStartCoords = {'x':-1, 'y':-1}, // X and Y coordinates on mousedown or touchstart events.
touchEndCoords = {'x':-1, 'y':-1},// X and Y coordinates on mouseup or touchend events.
direction = 'undefined',// Swipe direction
minDistanceXAxis = 10,// Min distance on mousemove or touchmove on the X axis
maxDistanceYAxis = 10,// Max distance on mousemove or touchmove on the Y axis
maxAllowedTime = 1000,// Max allowed time between swipeStart and swipeEnd
startTime = 0,// Time on swipeStart
elapsedTime = 0,// Elapsed time between swipeStart and swipeEnd
targetElement = document.getElementById('el');// Element to delegate

function swipeStart(e) {
e = e ? e : window.event;
e = ('changedTouches' in e)?e.changedTouches[0] : e;
touchStartCoords = {'x':e.pageX, 'y':e.pageY};
startTime = new Date().getTime();
targetElement.textContent = " ";
}

function swipeMove(e){
e = e ? e : window.event;
e.preventDefault();
}

function swipeEnd(e) {
e = e ? e : window.event;
e = ('changedTouches' in e)?e.changedTouches[0] : e;

touchEndCoords = {'x':e.pageX - touchStartCoords.x, 'y':e.pageY - touchStartCoords.y};

elapsedTime = new Date().getTime() - startTime;

if (elapsedTime <= maxAllowedTime){
if (Math.abs(touchEndCoords.x) >= minDistanceXAxis && Math.abs(touchEndCoords.y) <= maxDistanceYAxis){

direction = (touchEndCoords.x < 0 )? 'left' : 'right';

switch(direction){
case 'left':
alert("left");
document.getElementById("el").innerHTML="<img src = http://www.worthwild.com/assets/img-mas-02-73410a2b7c925f01866e68f4651510a0.jpg>";
break;
case 'right':
alert("right");
document.getElementById("el").innerHTML="<img src = http://www.worthwild.com/assets/img-mas-02-73410a2b7c925f01866e68f4651510a0.jpg>";
break;
}


}

if (Math.abs(touchEndCoords.x) >= minDistanceXAxis && Math.abs(touchEndCoords.y) <= maxDistanceYAxis){

direction2 = (touchEndCoords.y > 0 )? 'top' : 'bottom';

switch(direction2){
case 'top':
alert("top");
document.getElementById("el").innerHTML="<img src = http://www.worthwild.com/assets/img-mas-02-73410a2b7c925f01866e68f4651510a0.jpg>";
break;
case 'bottom':
alert("bottom");
document.getElementById("el").innerHTML="<img src = http://www.worthwild.com/assets/img-mas-02-73410a2b7c925f01866e68f4651510a0.jpg>";
break;
}


}

}

}

function addMultipleListeners(el, s, fn) {
var evts = s.split(' ');
for (var i=0, iLen=evts.length; i<iLen; i++) {
el.addEventListener(evts[i], fn, false);
}
}

addMultipleListeners(targetElement, 'mousedown touchstart', swipeStart);
addMultipleListeners(targetElement, 'mousemove touchmove', swipeMove);
addMultipleListeners(targetElement, 'mouseup touchend', swipeEnd);

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}

*, *:before, *:after {
box-sizing: border-box;
}

a {
text-decoration: none;
color: #333;
}

body {
margin-top: -22px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}

#container {
width: 360px;
height: 640px;
background-color: #ff5a5a;
}

.square-box{
margin: 0 auto;
position: relative;
width: 60%;
height: 15%;
overflow: hidden;
background: #4679BD;
top: 50px;
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
}
.square-content span {
display: table-cell;
text-align: center;
text-transform: uppercase;
vertical-align: middle;
font-size: 20px;
font-weight: bold;
color: white;
font-family: 'Lato', sans-serif;
}

.button-panel
{
display: table;
margin: 0 auto;
width: 60%;

}

.buttonlogin{
margin-top: 30%;
display: block;
background: #27adf1;
color: white;
border: none;
width: 100%;
height: 50px;
}

.button {
margin-top: 40%;
background: #27adf1;
color: white;
border: none;
width: 100%;
height: 50px;
}

.button2 {
margin-top: .25em;
border: 1px solid #27adf1;
color: #27adf1;
background: white;
width: 100%;
height: 50px;
}

#status{
margin: 0 auto;
width: 216px;
height: 50px;
color: #27adf1;
margin-top: 4.25em;
display: block;
background: white;
}

h1, p {
text-align: center;
}

#el {
margin: auto;
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 250px;
height: 250px;
line-height: 250px;
text-align: center;
}

#el img{
margin: auto;
height: 250px;
height: 250px;
line-height: 250px;
text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

<div class="main">

<div class="button-panel">
<button class="backbutton"
style="margin-top: 15%;
display: block;
background: #27adf1;
color: white;
border: none;
width: 100%;
height: 50px;"
onclick="window.location.href='index.html'">Back to Menu</button>
</div>

</div>

<div id="wrapper">

<div id="el">
<script type="text/javascript">
document.write("<img src = http://www.worthwild.com/assets/img-mas-02-73410a2b7c925f01866e68f4651510a0.jpg>");
</script>
</div>

</div>

</div>





The problem is top and bottom direction. There show alert with left and right direction...

But i want to get all seperate.

When i swipe to left, only get alert about left.

When i swipe to right, only get alert about right.

And the same for top and bottom...

What's wrong with this code?

Answer

This is the code I use for detecting swipe:

Here's a fiddle showing it in action (switch to mobile in dev mode)

If you want to make this specific to an element instead of the whole document then e.g.

var el = document.getElementById('myID');

el.addEventListener('touchstart', handleTouchStart, false);
el.addEventListener('touchmove', handleTouchMove, false);

This is for whole document

document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;
var yDown = null;

function handleTouchStart(evt) {
  xDown = evt.touches[0].clientX;
  yDown = evt.touches[0].clientY;
};

function handleTouchMove(evt) {
  if (!xDown || !yDown) {
    return;
  }

  var xUp = evt.touches[0].clientX;
  var yUp = evt.touches[0].clientY;

  var xDiff = xDown - xUp;
  var yDiff = yDown - yUp;

  if (Math.abs(xDiff) > Math.abs(yDiff)) { /*most significant*/
    if (xDiff > 0) {
      /* left */
      alert('left');
    } else {
      /* right */
      alert('right');
    }
  } else {
    if (yDiff > 0) {
      /* up */
      alert('up');
    } else {
      /* down */
      alert('down');
    }
  }
  /* reset values */
  xDown = null;
  yDown = null;
};