How to receive an event at the END of a page transition with jquery mobile

Context : I am trying to calculate the available vertical unused space on a jquery mobile page and use the result to size an element to use the maximum available space.

I can not start the calculation BEFORE the page has finished transitioning IN because the height of header, footer and content elements is set to 0 when the page is not visible.

I use the pageshow event to detect when the page transition is finished and do my calculation but found that the height of the footer is still 0 when the transition should be finished while it is in fact of 51px. also the page height return a height significantly smaller than the window or document height which is not the case once the transition is fully executed.

I have the impression that at the moment the pageshow event is triggered the page transition is in fact incomplete while according to the documentation it should be fired only once completed, aka all elements should have their final height.

Anybody know better or can point out some obvious mistake my understanding of this event ?

I have for now solved my problem by setting hard coded values but would much prefer to write a generic function that would work.

My code trimmed down : Exert of the HTML page :

...
<div data-role="page" id="pWhereAmI">
    <div data-role="header"  data-id="mainHeader" data-position="fixed">
        <h1>Where Am I ?</h1>
    </div>
    <div data-role="content" class="map-content">
        <ul data-role="listview" data-inset="true">
 开发者_如何学C           <li>Position Unknown</li>
            <li id="map_canvas"></li>
            <li>Center the map</li>
        </ul>
    </div>
    <div data-role="footer" class="nav-glyphish-example" data-id="mainFooter" data-position="fixed">
        <div data-role="navbar" class="nav-glyphish-example" data-grid="d">
            <ul>
                <li><a href="#pLogin" id="home" data-transition="fade" data-icon="custom"><small>Login</small></a></li>
             </ul>
        </div>
    </div>
</div><!-- /page pWhereAmI -->
...

Exert of the javascript code :

$('#pWhereAmI').live('pageshow',function(event, ui) {
    pageFreeHeight = pageFreeHeight_calc('#pWhereAmI');
    map_canvasHeight = $('#map_canvas').height() + pageFreeHeight;
    $('#map_canvas').height(map_canvasHeight);
});

The function called at pageshow event time :

function pageFreeHeight_calc(pageSelector) {
    if($(pageSelector).height != null) {
        pageHeight = $(pageSelector).height();
    }
    else {
        return null;
    }
    if($(pageSelector+' [data-role|="header"]').outerHeight(true) != null) {
        headerHeight = $(pageSelector+' [data-role|="header"]').outerHeight(true);
    }
    else {
        headerHeight = 0;
    }
    if($(pageSelector+' [data-role|="content"]').outerHeight(true) != null) {
        contentHeight = $(pageSelector+' [data-role|="content"]').outerHeight(true);
    }
    else {
        contentHeight = 0;
    }
    if($(pageSelector+' [data-role|="footer"]').outerHeight(true) != null) {
        footerHeight = $(pageSelector+' [data-role|="footer"]').outerHeight(true);
    }
    else {
        footerHeight = 0;
    }
    return pageHeight - headerHeight - contentHeight - footerHeight;

}

---

Hmm, I modified it a little but your code looks good to me. Here is a live example of what I have:

• http://jsfiddle.net/phillpafford/gkPAG/22/
• http://jsfiddle.net/phillpafford/gkPAG/28/ <-- Display elements heights after adjustments

JS:

$('#pWhereAmI').live('pageshow',function(event, ui) {
    canvasHeight     = $('#map_canvas').height(); // initialize the canvas height
    pageFreeHeight   = pageFreeHeight_calc('#pWhereAmI');
    map_canvasHeight = canvasHeight + pageFreeHeight;
    $('#map_canvas').height(map_canvasHeight).page();
});

function pageFreeHeight_calc(pageSelector) {
    var pageHeight     = null;
    var headerHeight   = 0;;
    var contentHeight  = 0;
    var footerHeight   = 0;

    if($(pageSelector).height != null) {
        pageHeight = $(pageSelector).height();
    }

    if($(pageSelector+' [data-role|="header"]').outerHeight(true) != null) {
        headerHeight = $(pageSelector+' [data-role|="header"]').outerHeight(true);
    }

    if($(pageSelector+' [data-role|="content"]').outerHeight(true) != null) {
        contentHeight = $(pageSelector+' [data-role|="content"]').outerHeight(true);
    }

    if($(pageSelector+' [data-role|="footer"]').outerHeight(true) != null) {
        footerHeight = $(pageSelector+' [data-role|="footer"]').outerHeight(true);
    }

    alert(
        'pageHeight: ' + pageHeight + "\n" +
        'headerHeight: ' + headerHeight + "\n" +
        'contentHeight: ' + contentHeight + "\n" +
        'footerHeight: ' + footerHeight + "\n" +
        'returnValue: ' + (pageHeight - headerHeight - contentHeight - footerHeight) 
    );
    return pageHeight - headerHeight - contentHeight - footerHeight;
}

HTML:

<div data-role="page" id="home">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#pWhereAmI">Where am I</a></li>             
        </ul> 
    </div>
</div>

<div data-role="page" id="pWhereAmI">
    <div data-role="header"  data-id="mainHeader" data-position="fixed">
        <h1>Where Am I ?</h1>
    </div>
    <div data-role="content" class="map-content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#home">Home</a></li>             
        </ul> 
        <br />
        <ul data-role="listview" data-inset="true">
            <li>Position Unknown</li>
            <li id="map_canvas"></li>
            <li>Center the map</li>
        </ul>
    </div>
    <div data-role="footer" class="nav-glyphish-example" data-id="mainFooter" data-position="fixed">
        <div data-role="navbar" class="nav-glyphish-example" data-grid="d">
            <ul>
                <li><a href="#pLogin" id="home" data-transition="fade" data-icon="custom"><small>Login</small></a></li>
             </ul>
        </div>
    </div>
</div><!-- /page pWhereAmI -->