CODEWITHSUNDEEP
jqueryjquery-mobilejquery-mobile-pageshow
Austin Adair
Austin Adair

Reputation: 159

jQuery mobile header cutting off content

I'm working on a jQuery mobile project where I want to use fullscreen headers data-position="fixed" data-fullscreen="true". The problem I am running into is that the header is cutting into the content.

I am trying to figure out a way to make the content move with the header movement. So when the header is visible then the content gets pushed down so it does not get cut off and when the header in not visible the content gets pushed up to minimize the white space.

As far as I can tell the only way to do this is to dynamically change the margin-top css rule for the div with the data-role content. I thought this would be easy but it is not.

Here is my html:

<div data-role="page" id="index">
    <div data-role="header" data-position="fixed" data-fullscreen="true" id='header'>Some Header Stuff</div>
    <div data-role="content" id="content">Some Content Stuff</div>
    <div data-role="footer" data-position="fixed" data-fullscreen="true">Some Footer Stuff</div>
</div>

So far I have tried the following jQuery solutions with no luck:

jQuery(document).on('pagecreate', function () {
    $("#content").css('margin-top', $('#header').height());
});

and

$(document).on('pageshow', '#index',function(e,data){   
    $('#content').height(getRealContentHeight()); 
});

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

Both of these solutions attempt to capture the height property of the header and from what I can tell a header with the settings of data-position="fixed" data-fullscreen="true" always shows a height of 0.

I have seen other solutions such as adding a bunch of <br/> tags or adding a empty div. These solutions all keep the empty white space when the header is not visible. Does anyone know how to actually make the header toggle the content up and down based on the header being visible or not?

Upvotes: 2

Views: 372

Answers (1)

Austin Adair
Austin Adair

Reputation: 159

Figured of a great solution

$(document).on('pageshow', function () {
    $("#content").css('margin-top', $('#header').height());
});

$(document).on('vmouseup', '#index',function () {
    setTimeout(function() {
        $("#content").css('margin-top', $('#header').height());
    }, 300);    
});

the above code sets the margin of the content upon pagecreate and re-sets the margin when the user clicks anywhere which usually collapses the header anyway.

Upvotes: 0

Related Questions