jquerymobile 1.4 NavBar inside header

by Varun Nath

HTML

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
     <div data-role="page" id="rankings" data-title="Rankings"> 

              <div data-role="header" data-position="fixed">

          <!--   <a href="#" id="open-panel" data-role="button" data-icon="grid" data-iconpos="notext"></a>
           -->
            <h1>Latest Rankings</h1>

                <div data-role="navbar">
                    <ul>
                        <li><a href="#rankings-week">Week</a></li>
                        <li><a href="#rankings-month">Month</a></li>
                        <li><a href="#rankings" class="ui-btn-active ui-state-persist">All Time</a></li>

                    </ul>

                </div>

              </div>

              <div data-role="content">

                <ol data-role="listview" data-inset="true" data-theme="a">
                </ol>

            </div>




              <div data-role="footer" data-id="foo" data-theme="a" >
            
            <!--     <div data-role="navbar">
                  <ul>
                    <li><a href="#rankings" class="ui-btn-active">Rankings</a></li>
                    <li><a href="#nearby">Nearby</a></li>
                    <li><a href="#profile">Profile</a></li>
                    <li><a href="#feed">Feed</a></li>
               </ul>
                </div> --><!-- /navbar-->

              </div>

          </div>

          <!--*************** END #rankings main page  *********** -->


          <!--*************** START #rankings-week main page  *********** -->

        <div data-role="page" id="rankings-week">

              <div data-role="header" data-position="fixed">

                <h1>Latest Rankings</h1>

                <div data-role="navbar">
                    <ul>
     ...

JavaScript

$(document).on("mobileinit", function() {
            $.mobile.loader.prototype.options.html = '<i class="fa fa-spinner fa-5x fa-spin"></i>';
        });


$(".show").on("click", function () {
    $.mobile.loading("show");
});
$(".hide").on("click", function () {
    $.mobile.loading("hide");
});