Exclude pages swipeLeft of right

Question

Hi,

I have tried this code that excludes swipe (left & right) on certain pages. Is there a way to exclude pages from left or right swipe only?

$(function(){

    $('#container').swipe({excludedElements:$.fn.swipe.defaults.excludedElements+=',.page[data-name="9"],.page[data-name="21"]'});
});

This code prevents the page from swiping left but reinitializes the animation on the page which is not wanted.

 

$("#container").swipe({

  swipeLeft:function(event, direction, distance, duration, fingerCount) {

        if(nav.current == 2)

{  //if current page is #2

nav.to(2);

        }

  }

 

thx

Answer 1

Yes, you can useSwipeLeft (as you have) or simply add logic to test the direction variable, e.g.,

 if(nav.current == 2 && direction == 'left')

If the animation is reloading, it probably means that the nav.to function is being called, and you may need to check your logic to be sure it's not be called when don't intend it to.

Comments

Thank you,

but I want to prevent to swipe left or right (not both) on certain pages. Is there a way to do that?

I understand the "If" section, I don't know how to code the "then" part to cancel the swipe.

thx

---

You don't need to cancel the swipe, just check the direction and only take action if the correct criteria is met.

If you want to actively cancel the swipe, you can use
return false;

---

Here is my code:

$(function(){

$("#container").swipe({
  swipeLeft:function(event, direction, distance, duration, fingerCount) {
        if(nav.current == 4) {return false;}
  },
  swipeRight:function(event, direction, distance, duration, fingerCount) {
        if(nav.current == 2) {return false;}
       
  }
});

I want to prevent SwipeLeft on page 4 and prevent SwipeRight on page 2. I put "return false;" but it still permits swiping.

Sorry, It seems I didn't quite understand...

Thx

---

If the in5 swipe is enabled, you probably have to destroy the original swipe beforehand (or turn it off in the export dialog):

$("#container").swipe("destroy");

---

If I get it right Justin you suggest I turn off the original Swipe option and then add one of my own? How do I do that?

All I want is to prevent Left or Right swipe on some pages.

---

Ok. Preventing only one type of swipe is tricky.

1) Use the exludedElements to prevent all swipes on the page.

2) Then add your custom swipe code to add a swipe in one direction on the excluded pages using the nav.to function.

---

ok Justin, now I understand... but when using ExcludedElements no swipe events are activated to those pages to handle. So do you mean I have to code entirely a new swipe code on my own?

thx

---

Ok, I found some code here that I could use to manage swipeLeft or right.

https://ajarproductions.com/pages/products/in5/answers/327/are-you-considering-iscroll

But I don't want to miss slider(fade in) effect. Is it easy to include this transition into the code?

thank you Justin

---

Justin thx,

I altered the code so I can now have the fadein transition effect and handle the swipeLeft and swipeRight events as you suggested.

The only thing is I notice that zooming with 2 fingers is sometimes not very responsive. When the js is not loaded, the native zooming is very responsive.
Is there a way to leave the zooming with its native speed when I have my swipe code loaded?

Thank you.

---

Yes, you can sent the number of fingers for the swipe events.
http://labs.rampinteractive.co.uk/touchSwipe/docs/%24.fn.swipe.defaults.html#fingers