I have some dinamic layout in may JQuery mobile \ phonegap application. I test HTML in iframe
. It's normal in iframe
. When I open it at android phone layout is breaks, but after oreinetation changed layout becomes normal. So, I read JQuery mobile code realted to orientationchange
event but did not found anything useful. How can I force android\jquery mobile to redraw page like after orientationchange
. I tried $page.trigger( "create");
and etc but it didnt help
Update
<script lang="javascript">
function calcBlockSizes() {
$.each($('[data-role=page]'), function(i, page){
$page = $(page);
var bodyfixed = $page.find(".bodyfixed");
var topfixed = $page.find(".topfixed:first");
var bottomfixed = $page.find(".bottomfixed:first");
if ($(".topfixed").length > 0) {
bodyfixed.css("top", topfixed.outerHeight() + 'px');
} else {
bodyfixed.css("top", "0px");
}
if ($(".bottomfixed").length > 0) {
bodyfixed.css("bottom", bottomfixed.outerHeight() + 'px');
} else {
bodyfixed.css("bottom", "0px");
}
$page.trigger( "create");
});
}
$(window).load(function() {
calcBlockSizes();
});
//$(document).delegate('.ui-page', 'pageshow', function () {
// calcBlockSizes();
//});
</script>
Problem is topfixed
div not looks like css("top", "0px");
same with bottom. They are at incorrect postions - something wrong with top
and bottom
values. But I didn't know how to test it inside phonegap app.