Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Swiping multiple pages at once results in empty page #37

Open
generator85 opened this issue Oct 11, 2012 · 6 comments
Open

Swiping multiple pages at once results in empty page #37

generator85 opened this issue Oct 11, 2012 · 6 comments

Comments

@generator85
Copy link

When the swipeview wrapper has got a fixed width it's possible to span multiple pages with one swipe. But new content is not being loaded in this page so it remains empty.

This issue is not present in non-touch browsers since the mouse-drag is only registered inside the wrapper (it will stop moving once your cursor moves outside the wrapper).

@cubiq
Copy link
Owner

cubiq commented Oct 11, 2012

demo page needed

@generator85
Copy link
Author

I've edited your demo and you can find it here: http://87.250.144.60

When you're on a tablet, just swipe all the way to the left/right of the screen.

@cstephe
Copy link

cstephe commented Jul 16, 2013

I believe this behavior is in the current posted ereader demo. If you overswipe, start from page left and slide right past the page over a long distance off the swipeable area, it will take you pass the buffer pages and end up blank.

I'm currently working on finding a good general solution for this. on my project adding the following into the __move function prevents it.
long hand:
var over = point.pageX < this.wrapper.offsetLeft;
if (over){
return;
}

basically if you are swipping outside your wrapper than stop. However offsetleft is the offset from its parent and not the entire page, so this isn't good for general use. I just started tracking this down and working it tonight so I'll see tomorrow if I find something better.

@cstephe
Copy link

cstephe commented Jul 16, 2013

OK this is a bit better

var wrapperBound = this.wrapper.getBoundingClientRect();
var absoluteWrapperLeft = wrapperBound.left + window.pageXOffset;
var absoluteWrapperRight = absoluteWrapperLeft + wrapperBound.width;
var over = point.pageX < absoluteWrapperLeft || point.pageX > absoluteWrapperRight;
if (over){
   return;
}

Basically it will restrict the scrollable area to the wrapper (left and right). I have only tested this out on my application on mobile safari and chrome but it seems to work well.

@cstephe
Copy link

cstephe commented Sep 25, 2013

wanted to post a video I made on this issue. Looks like the behavior I was seeing was on touch only. I'm going to look a little deeper and submit the fix pretty soon.

http://www.youtube.com/watch?v=vVMnDwTJz4c

check it out if you have time.

@cstephe
Copy link

cstephe commented Oct 1, 2013

#60

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants