CODEWITHSUNDEEP
javascriptjquerycssjquery-mobilescreen-orientation
James Goodwin
James Goodwin

Reputation: 7406

Hide jQuery Mobile fixed toolbars on orientation change

Using jQuery Mobile I can create a fixed toobar on a page using:

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

What I'd like to do would be to hide the fixed header when the device orientation changes, I can detect this using:

$(window).on('orientationchange ', function() {
    if (event.orientation === 'portrait') {

    }
    else if (event.orientation === 'landscape') {
    }
});

How can I hide the fixedtoolbar from the page? Setting display: none on the toolbar works, but leaves an empty space where the header was previously.

Upvotes: 0

Views: 588

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Working example: http://jsfiddle.net/d2mMv/

Javascript:

$(document).on('pagebeforeshow', '#index', function(){       
    $('#test-header').hide();
    $('#test-content').addClass('test-content');
});

CSS:

.test-content {
    margin-top: -40px !important;
}

Unfortunately because we are hiding a header it still exist so we can trigger create, pagecreate or updatelayout, thus we need to do it manually with css.

Upvotes: 2

Related Questions