Menu
I'm developing an app using Jquery Mobile and Phonegap. The issue that I have is that when I do a page transition, the incoming page first appears incorrectly (DOM elements not in the right position nor the right size), then once the transition is complete, the elements resize and move to the correct position. (Also, the page transitioning out also appears incorrectly before it moves out). I have tested this using both fade and slide transitions (I would like to have slide transitions ultimately).
Here is a jsFiddle illustrating the problem:
http://jsfiddle.net/fz7qs/2/
I am also using a div as a page container so that the entire page is not transitioning at once, but just the page container div.
I am using css percentages for pretty much everything (heights, widths, margins, etc) so that the app will scale to different device sizes. Additionally, I am using javascript to center some elements (fired on pageshow event). I think these percentages are part of the problem. I constructed a simple test on a desktop browser (taking out phonegap) and set a fixed height to the page container. This seemed to fix the problem, but when I tried it on my phone, the issue was still there.
Each page in the app is preloaded into the DOM using $.mobile.loadPage(). I figured if I preload them, the percentage height would be relative to the parent (the page container div) and the transitions should look correct.
Looking into Jquery Mobile further, I found that during a transition, the height of the page was set to an empty string. I tried to comment out this line just to test to see if it would work with percentage heights. Again, it worked on my desktop test, but not on the phone.
I am using Android phonegap (API level 8 - Android 2.2) on a Samsung Galaxy Nexus to test.
Is there any way to have the css and javascript positioning applied before the page transitions while keeping percentage based values?
index.html
<body>
<!-- header on every page -->
<div id="mainHeader">This is a header</div>
<!-- page content -->
<div id="pageContainer">
<div data-role="page"></div>
</div>
</body>
page1.html
<body>
<div data-role="page" id="page1">
<div class="subheader">
<div class="backButton"></div>
<div class="subheaderText">Settings</div>
<div class="helpButton"></div>
</div>
</div>
</body>
relevant css
#pageContainer {
overflow: hidden;
width: 100%;
height: 86.772486772486772486772486772487%;
}
.ui-mobile [data-role="page"] {
min-height: 0px !important;
color: white;
position: relative;
width: 100%;
height: 100%;
background: #868a73;
}
.subheader {
width: 100%;
height: 10.16260162601626016260162601626%;
background-color: #000;
display: inline-block;
text-align: center;
position: relative;
}
.backButton {
background: url("images/back_button.png");
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
float: left;
width: 8.888888888888888888888888888889%;
height: 52%;
margin-left: 5.555555555555555555555555555556%;
}
.subheaderText {
color: #FFF;
font-size: 2.45em;
font-weight: bold;
display: inline-block;
}
.helpButton {
float: right;
background: url("images/help_button.png");
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 8.888888888888888888888888888889%;
height: 64%;
right: 5.555555555555555555555555555556%;
}
630
First of all you can make your html to look like jquery mobile tutorials pages. you need to have html structure like:
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
Take a look on jquery mobile page anatomy.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
