mobile demo not working (scroll vertically)

[criesner]

The mobile demo is not working on my iphone5 or other emulator tools. You can swipe left and right but can not scroll vertically.

If you look at the demo on desktop it appears to work because you can scroll the page with the mousewheel however on touch devices you can not click drag the vertically.

Any fixes to this problem? thanks, -chris

[Stereobit]

Hey, I was running into some serious issues with touch event on iPhone when scrolling is possible so I had to prevent it. You could reactivate it with removing the event.preventDefault(); on touch move (line 533 right now). But it will possible break the swipe animation on iOS.

[fidoboy]

Is this issue solved??

[pedroaragon360]

This has been a nightmare... I found a fix, although I am not an expert, there may be a better solution, but this is what I did to allow scrolling (tested in chrome PC, android mobile and ipad retina).

How to allow scrolling inside the slide element There is no solution editing the dragend JS code, therefore I had to incorporate an additional event handler using this script: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

It's okay, don't worry, this is fast and easy, this is how I did it:

1. Link the touchswipe JS file and jQuery to your document
2. Add this code at the end of the page (or after dragend code):

$("#main").swipe( { //Generic swipe handler for all directions swipeStatus:function(event, phase, direction, distance) { var now= $(window).scrollTop() ; if (direction == 'up') window.scrollTo(0,now+distance); if (direction == 'down') window.scrollTo(0,now-distance); }, triggerOnTouchEnd:false, threshold:500 });

Replace "#main" with the selector you used for the dragend. What it does it that additionally adds an event listener looking for sliding up or down, and it SIMPLY moves the scroll location window according to the distance scrolled. It's basic, and so this aditional js script only listen for the swipe up/down and returns the value of the distance the user has moved.

What I found less smart is that this scrolling is made pixel by pixel, in the sense that for each pixel moved downwards/upwards it is running the script, and so recalculating the position offset. I have found it effective and it RUN FAST. I just hope someone could fix this through the dragend directly, as I couldnt do it that way.

[594727294]

Hello Pedro, can you share a fiddle with your fix? i can't seem to get it to work

[pedroaragon360]

Sorry, I don't have much time, I am working with idangerous script, very flexible and reliable. I hope this project get the fixes it needs because I liked it! http://www.idangero.us/sliders/swiper/

[netdust]

Hi guys

I have a fix for this: go and have a look at https://github.com/netdust/dragend/blob/master/dragend.js Maybe this can be merged here if it works out?

Stefan

[594727294]

@netdust your fix works perfect ! this should be merged into the next version.

cheers and thank you

[mrczzn]

@netdust tnx! it works (tested on motog android 4.4)

[murito]

In IOS when I try to drag to right, the element not is restored to the original position, when drag to the left works perfectly. Anybody can help me?

I am using the solution of @netdust

[ndkv]

@murito I'm experiencing the same on Android (Chrome and Firefox). The first page works OK, though.

@netdust Can you have a look? It would be super if this works!

[murito]

@ndkv I solved the problem temporarily, with the following code:

$("#content").dragend({ onDrag: function(a,b){//While dragging, catch direction and distance jumpToPage: 1,//This is for initiate in the middle page comeFrom = b.direction; distance=b.distanceX; }, onDragEnd: function(a,b,pagina,d){ if ( comeFrom == "left" ){ //Actions }else { this._scrollToPage(0);// this is the trick //Actions } } });

[netdust]

try this fix, I haven't tested it thoroughly, being Christmas and all :)

http://git.io/1xdgTg

2014-12-24 16:47 GMT+01:00 murito notifications@github.com:

@ndkv https://github.com/ndkv I solved the problem temporarily, with the following code:

$("#content").dragend({ onDrag: function(a,b){//While dragging, catch direction and distance jumpToPage: 1,//This is for initiate in the middle page comeFrom = b.direction; distance=b.distanceX; }, onDragEnd: function(a,b,pagina,d){ if ( comeFrom == "left" ){ //Actions }else { this._scrollToPage(0);// this is the trick //Actions } } });

— Reply to this email directly or view it on GitHub https://github.com/Stereobit/dragend/issues/26#issuecomment-68059655.

Netdust[i]std. Stefan Vandermeulen

you can follow me on twitter https://twitter.com/#!/netdust or google+ https://plus.google.com/u/0/116430909251309245804/postsgsm: +32(0)475 238 704

[ndkv]

@netdust Works like a charm! Send a pull request to @Stereobit? :)

[Stereobit]

Yes, please :)

[murito]

Hi i found a new problem in the solution of @netdust , when i click in any element, the dragend function not work more.

regards!

[murito]

I know that this is closed but i dont know where write. I found that when you click any element, the function of dragend not work more, but if you add "this._afterScrollTransform.call();" on the onDragEnd, this works newly. Maybe you want add this trick to the plugin.

[ptisdel]

I solved this; in the _onMove function, right below "event = event.originalEvent || event;" simply add:

           var coords = getCoords(event),
                x = this.startCoords.x - coords.x,
                y = this.startCoords.y - coords.y;

            if (Math.abs(y) > Math.abs(x)) return;

[PowrSlave]

@ptisdel great job it seems to work so far!