Temporarily enable vertical scrolling using the TouchSwipe plugin

Question

I use the SwipeTouch plugin to hide and show the #child element by scrolling.

I have a #parent element that contains a #child element.

This #child will not always have enough content to create a scrollbar, but a problem will occur when there is one. #parent limits the #child element by forcing the scroll bar if the #child element #child higher than #parent

 <div id="parent"> <div id="child"> <!-- Lots of content --> </div> </div>​ 

---

I want to allow scrolling in any direction to show and hide #child ...

• Scrolling in the show #child will be indicated as swipeIN .
• Highlighting the hide #child will be called swipeOUT .

... the problem is , if and when the scroll bars exist, and #child is visible, I cannot scroll vertically, because this will be logged as an attempt to capsize and run swipeOUT .

So I had a plan:

• No scrollbar: swipe in all directions to call swipeIN and swipeOUT .
• Scroll bars: swipe in all directions to call swipeIN . Swipe up or down to scroll, swipe left or right to call swipeOUT .

It was a good plan, except that it does not work. I assume that if I could turn off the top of the swipe and temporarily scroll down, it would work ...

Link to my attempt (the problem only appears on the touch device).

The link that is best suited for testing on a touch device

Any ideas on how I can make this work?

Answer 1

I started thinking about the long term plan of my own project and some time ago I finally contacted the plugin developer via github (link to the github problem page).

He updated the plugin so that now you can change all plugin parameters on the fly. It also allows the behavior I was looking for. The documentation for this can be found here (Method called: option ).

http://jsfiddle.net/lollero/yATmM/

http://jsfiddle.net/lollero/yATmM/show

My code is:

 $(function() { $(".parent").each(function() { var obj = $(this), objD = obj.data(), objChild = obj.find('.child'), scrollbars = obj.height() < objChild.height(); obj .data({ "swipe": "in" }) .swipe({ fallbackToMouseEvents: true, swipe:function( event, direction ) { // swipeIN = swipe that shows #child // ( Swiping is allowed for all directions ). if ( objD.swipe === 'in' ) { obj.data({ "swipe": "out" }); objChild.show(); // If scrollbar exists, set allowPageScroll data // to 'vertical', so that next time when you swipe // up or down, you can scroll vertically. scrollbars && obj.swipe('option', 'allowPageScroll', 'vertical'); } // swipeOUT = swipe that hides#child // If scrollbars don't exist, swipe at any direction to hide. // If scrollbars exits, swipe left or right to hide ( Up and Down is reserved for scrolling ). else if ( objD.swipe === 'out' && scrollbars && ( direction === 'left' || direction === 'right' ) || objD.swipe === 'out' && !scrollbars ) { obj.data({ "swipe": "in" }); objChild.hide(); // If scrollbar exists, set allowPageScroll data to // false, so that next time when you swipe up or down, // you actually trigger a swipe. scrollbars && obj.swipe('option', 'allowPageScroll', false ); } } }); }); }); 

Answer 2

Setting the "allowPageScroll" option from "auto" (default) to "vertical" (in some cases, if you want) should do the trick

http://labs.skinkers.com/touchSwipe/docs/symbols/%24.fn.swipe.defaults.html#allowPageScroll