vertical scrolling on the iPhone #7

Closed
bkuzma opened this Issue Oct 21, 2010 · 6 comments

Comments

Projects
None yet
3 participants
@bkuzma

bkuzma commented Oct 21, 2010

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 comment has been minimized.

Show comment
Hide comment
@pisi

pisi Oct 21, 2010

Owner

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!

Owner

pisi commented Oct 21, 2010

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

This comment has been minimized.

Show comment
Hide comment
@bkuzma

bkuzma Oct 21, 2010

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

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

bkuzma commented Oct 21, 2010

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

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

@mtoigo

This comment has been minimized.

Show comment
Hide comment
@mtoigo

mtoigo Feb 23, 2011

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

mtoigo commented Feb 23, 2011

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

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Feb 23, 2011

Owner

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

Owner

pisi commented Feb 23, 2011

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

This comment has been minimized.

Show comment
Hide comment
@mtoigo

mtoigo Feb 24, 2011

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

mtoigo commented Feb 24, 2011

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

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Mar 20, 2011

Owner

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.

Owner

pisi commented Mar 20, 2011

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.

@pisi pisi closed this Mar 20, 2011

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment