I am using hammer.js to reset my timer when the user performs an action on their touch device. This works fine with tap, press and horizontal swipe, but how can I get it to recognise vertical swiping?

$(function () { 
    var page = document.getElementById("parent"); 

    Hammer(page).on("swipe", function () { 
        idleTime = 0; 
    }); 

    Hammer(page).on("tap", function () { 
        idleTime = 0; 
    }); 

    Hammer(page).on("press", function () { 
       idleTime = 0; 
    }); 

}) 

I am using hammer.js to reset my timer when the user performs an action on their touch device. This works fine with tap, press and horizontal swipe, but how can I get it to recognise vertical swiping?

$(function () { 
    var page = document.getElementById("parent"); 

    Hammer(page).on("swipe", function () { 
        idleTime = 0; 
    }); 

    Hammer(page).on("tap", function () { 
        idleTime = 0; 
    }); 

    Hammer(page).on("press", function () { 
       idleTime = 0; 
    }); 

}) 

• javascript
• hammer.js

1 Answer 1

Swipe is for all directions.

Use swipeleft and swiperight for horizontal swipe and swipeup, swipedown for vertical swipe.

		$(function () { 
			var element = document.getElementById("parent"); 
			var mc = new Hammer(element);
			mc.get('swipe').set({ direction: Hammer.DIRECTION_ALL });

			mc.on("swipeleft", function () { 
				alert('swipeleft');
			}); 
          
           mc.on("swiperight", function () { 
				alert('swiperight');
			});
			
			mc.on("swipeup", function () { 
				alert('swipeup');
			}); 
			
			mc.on("swipedown", function () { 
				alert('swipedown');
			});
          
		}) 

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
<div id="parent" style="width:100%;height:500px;background:#ff0000;"></div>