Image Drag on iPad Accelerating

[bcournoyer]

On my client’s site if you scroll down you’ll see a long black image of the companies history. On a tablet you can drag it right or left, but that drag accelerates the longer you drag. I can’t figure out the cause.

Here’s the relative code:

    $("#tImg").bind('touchstart',function(){t_touchStart(event,'tImg');});
    $("#tImg").bind('touchmove',function(){t_touchMove(event);});

function t_touchStart(event,passedName) {
    // disable the standard ability to select the touched object
    event.preventDefault();
    // get the total number of fingers touching the screen
    fingerCount = event.touches.length;
    // since we're looking for a swipe (single finger) and not a gesture (multiple fingers),
    // check that only one finger was used
    if ( fingerCount == 1 ) {
        moveDocWidth = $(window).width();
        // get the coordinates of the touch
        startX = event.touches[0].pageX;
        // store the triggering element ID
        triggerElementID = passedName;
    } else {
        // more than one finger touched so cancel
        t_touchCancel(event);
    }
}

function t_touchMove(event) {
    event.preventDefault();
    if ( event.touches.length == 1 ) {
        curX = event.touches[0].pageX;
        moveLeft = moveLeft + ((curX - startX)/6);
        if(moveLeft > 0){ moveLeft = 0; };
        moveMax = moveDocWidth - 4399;
        if(moveLeft < moveMax){ moveLeft = moveMax; };
        moveX = moveLeft + "px";
        $("#tImg").css({marginLeft:moveX});
    } else {
        t_touchCancel(event);
    }
}

Side note: I can’t find a search function on this forum so I couldn’t search for a similar question.

[bcournoyer]

I figured it out. I was setting swipe start at the beginning of the swipe, but touchmove was being called multiple times always using the same swipe start. So the longer the swipe, the more touchmoves working.

I added startX = curX; after I changed the css and removed /6 to speed things up. Now follows finger just fine.

[Author]

Posts