Trying To Make Navigation Bar For Tablet Site

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 l

Solution 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/