jquery mobile content height changing after transition + strange effects

Question

I`m building an app using jquery mobile, and after searching for some answers, I could create 100% height content divs.. here is my html code and js:

<body>
<div data-role="page" id="page1">
        <div data-role="header" data-position="fixed">
            <h1>Page 1</h1>
        </div>
        <div data-role="main" class="ui-content">                
            <a href="#page2" data-transition="slide" class="ui-btn ui-corner-all">Go to Page Two</a>
        </div>
        <div data-role="footer" data-position="fixed" data-id="myfooter">
            <h1>Footer</h1>
        </div>
    </div>

    <div data-role="page" id="page2">
        <div data-role="header" data-position="fixed">
            <h1>Page 2</h1>
        </div>
        <div data-role="main" class="ui-content">
            <a href="#page1" data-transition="slide" data-direction="reverse" class="ui-btn ui-corner-all">Go back to Page 1</a>
        </div>
        <div data-role="footer" data-position="fixed" data-id="myfooter">
            <h1>Footer</h1>
        </div>
    </div>
</body>

I found this codehere in another discussion set content height 100% jquery mobile.so, my jquery code is:

function contentHeight() {
var screen = $.mobile.getScreenHeight(),
    header = $(".ui-header").outerHeight(),
    footer = $(".ui-footer").outerHeight(),        
    contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height(),
    content = screen - header - footer - contentCurrent;   
$(".ui-content").height(content);
}

$(document).on("pagecontainertransition", contentHeight); 
$(window).on("throttledresize orientationchange", contentHeight);

So, after using the tags to change pages, you can see that scrollbar shows up, indicating that the content height just changed! I was looking for a 100% height app with the possibility of adding more tags in the content (I do not want to set a fixed height for the content..) but after the transition, this effect happens on the height.. the jquery code Am I doing something wrong? I am new in jquery so I am afraid I am doing something wrong..

Also, during the transition effect, you can see that the footer is acting strange, changing its background color, moving a few pixels around.. is that because of the previous issue??

Thanks already and sorry for the bad English

jquery mobile content height changing after transition + strange effects

0 Answers0