JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<div data-role="page">
<div data-role="content">
<div id="navHolder-container">
<div id="navHolder">
<p>content in here</p>
</div>
</div>
</div>
</div>
CSS
#navHolder {
position : absolute;
width : 1000px;
}
#navHolder-container {
position : relative;
overflow : hidden;
height : 100px;
width : 100%;
}
JavaScript
$(function () {
var convert = {
swipeleft : '-=100',
swiperight : '+=100'
};
$('#navHolder-container').bind('swipeleft swiperight', function(e) {
$('#navHolder').animate({ left: convert[e.type]});
});
});