Sliding page in a mobile web application

Question

There is a slide transition in jquerymobile when previous / previous pages are displayed, but on iPhone4 its behavior / animation looks like this: - the button "pressed


- Url string is displayed
- the whole page is moved down - the next page is shown (using a slide transition)
-Url-bar is hiding again
- the whole page is moved up

To avoid this show / hide of url bar (and the page moves up / down) when moving to the next page.

Answer 1

I believe that this viewport meta tag will help you solve the problem with the address bar (if you are using any of the alpha releases):

<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0" > 

However, support for this was added in the first beta, my mobile site (using JQuery Mobile 1.0 Beta 1) does not display the address bar unless you scroll up to see it on the iPhone.

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> 

Or you can download all the necessary jQuery Mobile beta files here:

 http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.zip 

Note. Setting the initial and maximum scales to the same value in the viewport meta tag disables scaling, if you want to enable scaling, just make the maximum scale larger than the original one.

Answer 2

You can try sticking to window.scrollTo(0, 1) somewhere that might help.