Hi, I have a Reel instance that I'm using in an iPhone-specific site. The image is 320x240 px, which occupies a fair amount of screen space. I'm unable to swipe vertically on the image to scroll the page up and down.
The text was updated successfully, but these errors were encountered:
This actually is a very interesting point and valid I didn't realize back then. Thank you for bringing it up!
I will think about some wise solution for that. Especially with respect to multi-row setup support which is a new feature in 1.1 and which employs vertical scrolling. For other cases I guess the vertical scrolling could be released back to the underlaying page.
It definitely won't be in the upcoming 1.1, which is in RC now, but some patch should be available soon after.
Also besides the fact I realize what the problem is already, can you show me your testcase. It would be very helpful. Thanks!
I actually just implemented a fix for this myself if anyone is interested. The trick is analyzing the path someone's finger travels and then determining if they are trying to swipe the image or actually scroll the page. This is quick and dirty proof of concept code and could be re factored more properly as a patch to use the existing code structure. Please feel free to refactor and incorporate back into the plugin. We're using this plugin for a major auto manufacturer's mobile site and really dig it. Keep up the great work.
//The code below should be added after line 248
//The code below can replace the code from lines 270 - 271
//Store the point where our touch began
origin_x = finger(e).clientX;
origin_y = finger(e).clientY;
t.trigger('down', [finger(e).clientX, finger(e).clientY, true]);
//Determine the angle that the touch event is moving along
var x_travel = abs(origin_x - finger(e).clientX);
var y_travel = abs(origin_y - finger(e).clientY);
var touch_angle = (Math.atan(x_travel / y_travel) * 180)/3.14;
//Anything above 45 is usually an attempted swipe on the reel image
t.trigger('slide', [finger(e).clientX, finger(e).clientY, true]);
I implemented your solution. I liked it and even improved it - the touch origin is being already tracked by Reel's down handler in .data("clicked_location") which is a object with x and y keys, so no need for altering touchstart handler at all ;) Overall your math is perfect (I wouldn't do the detection better myself). Great job!
But my progress got a little twist ;) Soon I realized that when touchstart and touchmove handlers don't return false, Safari's built-in scrolling detection takes place, so there's no direct need for motion direction detection after all. When touchmove returns false, built-in scrolling is prevented. So what I did was I added a new boolean data key reeling, which is true when Reel is being manipulated by user. So from the very start of the touch I assume scrolling is possible and block scrolling for multi-row and orbital setups and once manipulation was started.
So after all the solution lied in adding a general purpose reeling indicator property and letting Safari do its job in detecting the scroll ;)