CODEWITHSUNDEEP
jqueryjquery-mobile
MarkZ
MarkZ

Reputation: 280

Disable/Hide Header and Footer Howto

I create my JQM app with multipage and external header footer. I initialize the header and footer with the following code at certain point of my app (not the first page of the app):

function initHeaderFooter(){
    $( "[data-role='header'], [data-role='footer']" ).toolbar();
}

Now my problem, after user logout, back to first page, I'm having problem removing the header and footer.

I tried using the following code hope to have the header and footer remove. But instead of removing the bar, it show an Empty Bar instead of hiding the bar:

$('.ui-footer').html($('').navbar());

Please advice the proper way to remove header and footer.

To show the header and footer again, I call the initialize function but it doesn't show up:

$(document).on('pagecreate', '#userMainPage', function () {
    initHeaderFooter();
    $('.ui-footer').html($(
    '<div id="footerButton" data-role="navbar"><ul><li><a href="#restaurantList" data-transition="flow">Find Restaurant</a></li><li><a href="#">My Favourite</a></li></ul></div>'
).navbar()); });

Upvotes: 1

Views: 1800

Answers (1)

Omar
Omar

Reputation: 31732

To hide/show any element, you can simply add/remove ui-screen-hidden class. This class is simply a CSS class with display: none;. .toggleClass() is .addClass() + .removeClass() in one function.

Note that when you hide/show toolbars, you need to update page's height after showing/hiding them.

$("[data-role=header], [data-role=footer]")
    .toggleClass("ui-screen-hidden", function () {
    $.mobile.resetActivePageHeight();
});

Demo

Upvotes: 3

Related Questions