Menu
I have two $('body').swipe(); functions below, which obviously can't function together because the second one cancels out what I want to do (two functions run on the same DOM element, etc.)...
The first function works as it should. Swipes left and right with TWO fingers. My problem is, this disables the normal one finger page scroll one would be able to do on the iPad.
Question: I want to run the swipe left & right functions with two fingers (works), however I want to enable allowPageScroll: 'vertical' on 1 finger swipe. How can I accomplish this? I can't figure out a way to run the options (i.e. allowPageScroll: 'vertical', threshold: 200, fingers: 2) within the swipeLeft: and swipeRight: functions only.
The plug-in used can be found here: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
$('body').swipe({
swipeLeft: function (event, direction, distance, duration, fingerCount) {
// set cookie
$.cookie('sb-swipe', 'inactive', { expires: 1 });
//This only fires when the user swipes left
openDashboard();
// hide swipe instructions, if applicable
$('div.instructions-overlay').fadeOut('slow');
},
swipeRight: function (event, direction, distance, duration, fingerCount) {
//This only fires when the user swipes right
closeDashboard();
$('#employee-dash-btn').hide();
},
allowPageScroll: 'vertical',
threshold: 200,
fingers: 2
});
$('body').swipe({
allowPageScroll: 'vertical',
fingers: 1
});
768
A multi-touch gesture is when multiple pointers (fingers) touch the screen at the same time. This lesson describes how to detect gestures that involve multiple pointers. Refer to the following related resources: Input Events API Guide. Sensors Overview.
Introducing multi-touch That's called a "tap" gesture. Another gesture is called "drag". That's where you hold one finger on the screen and move it around, causing the content under your finger to scroll. Tap, drag, and a few other single-fingered gestures have always been supported in Android.
Multi-touch gesture happens when more then one finger touches the screen at the same time. Android allows us to detect these gestures. Android system generates the following touch events whenever multiple fingers touches the screen at the same time.
I think I get something working, but not with the TouchSwipe plugin you link (after a lot of tests with it I just give up and try another thing).
I've use Touchy (1.98 kb) that can be found here, which provide support for multiple fingers up to 5. The other part to detect a swipe to the left or right is a little manual, by saving the X coordinates of the two fingers at the start of the touch event and at the end into variables.
We have just to compare if the two first coordinates are larger or smaller. Code below is a swipe to the right :
if (finger1Start < finger1End && finger2Start < finger2End)
I decide to consider a real swipe when the two fingers have move in the same direction, but it's up to you if you want to change.
Last thing, if you really want the threshold, you have just to save the start and end time of the event with new Date().getTime(); subtract them and verify that they are > of 200ms. I can update the code if you want to.
Here is the Fiddle, I've tested it on iPhone 4s (iOS 7.0.3).
var finger1Start,
finger1End,
finger2Start,
finger2End,
threshold = 200;
$('body').touchy({
two: function (hand, finger1, finger2) {
hand.on('start', function (points) {
finger1Start = points[0].x;
finger2Start = points[1].x;
});
hand.on('end', function (points) {
finger1End = points[0].x;
finger2End = points[1].x;
testSwipe();
});
}
});
function testSwipe () {
if (finger1Start < finger1End && finger2Start < finger2End)
// The two X coordinates of the fingers have swipe to the right
if (finger1End - finger1Start >= threshold &&
finger2End - finger2Start >= threshold) {
$('#message').text("You have swipe to the right");
}
else {
$('#message').text("Not enought swipe");
}
}
else if (finger1Start > finger1End && finger2Start > finger2End) {
// The two X coordinates of the fingers have swipe to the left
if (finger1Start - finger1End >= threshold &&
finger2Start - finger2End >= threshold) {
$('#message').text("You have swipe to the left");
}
else {
$('#message').text("Not enought swipe");
}
}
}#message {
color:green;
}
#text {
width: 100px
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/jairajs89/Touchy.js/master/touchy.js"></script>
<body>
<div id="message"></div>
<div id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut placerat lacus. Etiam vel aliquam quam. Aenean et hendrerit elit, quis porttitor erat. Cras lacinia ornare sem ut laoreet. Sed consectetur felis at hendrerit posuere. Nam porttitor magna sed quam malesuada, eu adipiscing sapien dapibus. Praesent fermentum sem sit amet diam posuere, non vestibulum velit porttitor. Etiam sodales tellus nec mi venenatis dignissim. Aliquam metus lectus, feugiat ac tellus hendrerit, auctor sollicitudin metus.
Morbi bibendum lectus erat, a iaculis tellus egestas nec. Cras adipiscing augue ac lectus placerat tempor. Fusce iaculis mollis lectus, nec mattis mi rhoncus id. Nullam scelerisque feugiat mollis. Mauris nec augue erat. Aliquam fermentum nibh ligula, vel tempus dui feugiat vel. Aliquam a consequat nisl, eu vulputate velit. Mauris pulvinar accumsan leo nec venenatis. Nullam at orci nec lorem facilisis tempor ac vitae purus. Fusce elit nulla, commodo sit amet nisi nec, euismod egestas sem. Nulla dui libero, accumsan et dignissim vitae, commodo vitae leo. Suspendisse potenti. Pellentesque vitae lectus sit amet lacus pulvinar imperdiet in id nulla. Nunc lacinia felis eu lobortis pretium.
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
