Horizontal Scrolling NavBar with Jquery Mobile and HTML5

Question

I know this question has been asked before, but I'm having a heck of time finding a simple solution to this. I scouring the web and not finding a straight forward answer. I have this code in my HTML file

<footer data-role="footer" data-position="fixed">
<nav data-role="navbar">
    <ul>
        <li><a href="#" class="yellow">item 1</a></li>
        <li><a href="#" class="orange">item 2</a></li>
        <li><a href="#" class="red">item 3</a></li>
        <li><a href="#" class="yellow">item 4</a></li>
        <li><a href="#" class="orange">item 5</a></li>
        <li><a href="#" class="red">item 6</a></li>
    </ul>
</nav>
<div data-role="footer">
    <h3>Some info here</h3>
</div>
</footer>

I just want to make the list items scrollable horizontally, but not the div with the H3 tag. I'm new to JQuery mobile and HTML5, so any input is appreciated. I've tried to implement iScroll and a few other methods, but I'm having trouble putting it all together. Thanks!

Answer 1

  <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="js/cordova-2.4.0.js" charset="utf-8"></script>
<style>
    #overflow {
        border: 1px solid #000;
        height: 60px;
        width: 320px;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    #overflow .container div {
        float: left;
        width: 60px;
        height: 45px;
        float: left;
    }
</style>
</head>    
<body>
<div data-role="page" id="currentorders">
    <div data-role="header">
        <h1>Orders</h1>
    </div>
    <div data-role="content">            
    </div>
    <footer data-role="footer" data-position="fixed">
        <nav data-role="navbar">
            <div id="overflow">
                <div class="container">
                    <div><a href="" class="yellow">item 1</a>
                    </div>
                    <div><a href="" class="orange">item 2</a>
                    </div>
                    <div><a href="" class="red">item 3</a>
                    </div>
                    <div><a href="" class="yellow">item 4</a>
                    </div>
                    <div><a href="" class="orange">item 5</a>
                    </div>
                    <div><a href="" class="red">item 6</a>
                    </div>
                    <div><a href="" class="red">item 7</a>
                    </div>
                    <div><a href="" class="red">item 8</a>
                    </div>
                    <div><a href="" class="red">item 9</a>
                    </div>
                    <div><a href="" class="red">item 10</a>
                    </div>
                </div>
            </div>
        </nav>
        <div data-role="footer">
            <h3>Some info here</h3>
        </div>
    </footer>
</div>        
</body>
<script>
 $('#currentorders').live("pageshow", function () {
  var width = 0;
  $('#overflow .container div').each(function () {
    width += $(this).outerWidth(true);
  });
  $('#overflow .container').css('width', width + "px");
})

$("#overflow .container div a").live('touchstart', function () {
 var width = 0;
 $('#overflow .container div').each(function () {
    width += $(this).outerWidth(true);
 });
 $('#overflow .container').css('width', width + "px");
})
</script>    
</html>

Horizontal Scrolling NavBar with Jquery Mobile and HTML5

Question

1 answers

solution1
0 2014-01-01 13:16:59

Horizontal Scrolling NavBar with Jquery Mobile and HTML5

Question

1 answers

solution1 0 2014-01-01 13:16:59

solution1
0 2014-01-01 13:16:59