show/hide navbar in footer based on footer tap

Question

jqm 1.1.1 and cordorva 2.0.0

I'm trapping clicks within the footer and on a click I'm toggling show()/hide() the navbar.

So far I'm trapping the taps, the navbar is showing/hiding but when it shows it lengthens the page by the height of the navbar. This lengthing is not noticeable but it makes the page scrollable even after the navbar is hidden. (It only adds the navbar height once, to the bottom of the page.)

Just as an FYI, "tap to toggle" is NOT an option because it requires tapping in the ui-content portion of the screen and that has other clickables which is why I have to trap clicks in the footer.

How can I not have that length added to the bottom of the page so that the navbar is more of an overlay than an extension OR how can I remove that extra height on hide();

The footer code looks like this:

<div data-role="footer" data-position="fixed" data-theme="b">
  <div id="menu" data-role="navbar" data-iconpos="top">
    <ul>
      <li><a href="#" data-icon="gear">Settings</a></li>
      <li><a href="#" data-icon="delete">Delete</a></li>
    </ul>
  </div>
  <h6>App Footer Text</h6>
</div><!-- /footer -->  

The show/hide javascript is this:

if(stateMenu == false)
{
  $('#menu').addClass('fixed');
  $("#menu").show();
  stateMenu = true; 
}
else
{
  $('#menu').removeClass('fixed'); 
  $('#menu').hide();  
  stateMenu = false;
}   

Thanks all...

Answer 1

Add this to the show block:

$('#menu').css('display', 'normal');

Add this to the hide block:

$('#menu').css('display', 'none');

This removes the div from the dom so now the menu shows/hides and looks like it should... you can tie it to any event including the menu button (i've tied it to the menu button and the tap inside the footer)