formatting toolbars in footer

by needlethread

HTML

<div id="tt_topbar" data-role="header" data-position="fixed"> <a href="#tt_leftpanel" data-icon="bars" class="ui-btn-left">Menu</a>

    <fieldset data-role="controlgroup" data-type="horizontal" class="ui-btn-right">
        <input name="tt_view_sel" id="tt_view_tool" value="tool" checked="checked" type="radio">
        <label for="tt_view_tool">Mode A</label>
        <input name="tt_view_sel" id="tt_view_data" value="data" type="radio">
        <label for="tt_view_data">Mode B</label>
    </fieldset>
     <h1>Header<span id="tt_titlesuffix"></span></h1>

    <div data-role="navbar" data-position="fixed" class="tt_toolhdr">
        <ul>
            <li><a class="ui-btn-active ui-state-persist" data-panel="main" href="#">Uno</a>

            </li>
            <li><a data-panel="due" href="#">Due</a>

            </li>
        </ul>
    </div>
</div>
<div>
    <p>Click on Mode B to remove the navbar</p>
    <p>Unfortunately the rest of the content does not move up, unless the window is resized.</p>More stuff here</div>

<div data-role="footer" data-position="fixed">
  <div data-role="toolbar" class="narrowctrls" style="text-align: right;">
    <div data-role="controlgroup" data-type="horizontal" data-mini="true">
      <a class="ui-btn" href="#">Save</a>
      <a class="ui-btn" href="#">Save As</a>
      <a class="ui-btn" href="#">Delete</a>
      <a class="ui-btn" href="# ">New</a>
				   
				   
    </div>
  </div>
</div>
<!-- footer -->

JavaScript

$(document).ready(function () {
        $("input[name='tt_view_sel']").on('change', function () {
            view = $(this).val();
            if (view == "data") {
                $(".tt_toolhdr").hide();
            } else {
                $(".tt_toolhdr").show();
            }
        });
    });