vertical scrolling on the iPhone

[bkuzma]

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.

[pisi]

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!

[bkuzma]

here is a test case: http://dev.briankuzma.com/jqTouchTest/

Thanks a lot, looking forward to the wise solution :)

[mtoigo]

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.

• Matt Toigo

//The code below should be added after line 248
var origin_x;
var origin_y;

//The code below can replace the code from lines 270 - 271
.bind(_touchstart_, function(e){
    //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]);
    return true; 
})
.bind(_touchmove_, function(e){
    //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
    if(touch_angle>45) {
        t.trigger('slide', [finger(e).clientX, finger(e).clientY, true]);
        return false;
    }
    else {
        return true;
    }
})

[pisi]

Nice one, Matt! Your approach indeed looks right. Thanks for sharing. I will look into it deeper this weekend.

I'm looking forward to the site you're working on ;)

.pisi

[mtoigo]

Will do. I'll be sure to float you a link when it launches.

[pisi]

Matt,

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 ;)

Anyway, I just released the patch version 1.1.1 with the cure.

PS: Please let me know if posting of your (credited) links on Reel site is possible (from one my other mail). Thanks.