Question

I’m designing a navigation bar for a tablet website. The navigation bar holds elements displayed horizontally, and I want to be able to display new elements with a swipe (kind of like a cover flow) without the window moving. This is the code I’m using now (jQuery Mobile):

//Tablet Features
        $('#navHolder').bind('swipe', 
            function(e) {
              $('#navHolder').animate({left:thisLeft - 100});
            }
        );

I dont think I can trigger a swipe without first disabling scroll, but I’m open to all suggestions. Please help.

Answer 1

Set the parent container of the element you are scrolling to overflow : hidden so no scroll-bars appear. Then swipe events should work fine since you won’t be able to use native scrolling to scroll the content.

HTML —

    <div id="navHolder-container">
        <div id="navHolder">
            <p>content in here</p>
        </div>
    </div>

CSS —

#navHolder {
    position : absolute;
    width    : 1000px;
}
#navHolder-container {
    position : relative;
    overflow : hidden;
    height   : 100px;
    width    : 100%;
}

JS —

$(function () {
    var convert = {
            swipeleft  : '-=100',
            swiperight : '+=100'
        };
    $('#navHolder-container').bind('swipeleft swiperight', function(e) {
        $('#navHolder').animate({ left: convert[e.type]});
    });
});

Here is a demo: http://jsfiddle.net/B8PQn/1/