Edit Question - KnowledgeHub

Title Body

I am building a phonegap app that needs to scale to all resolutions, and am thus defining everything in terms of percentages. I'm also using a fixed header with a div I defined in Jquery as the contents. The problem I have is that during the transition between pages, there is a 'stutter' because the page height changes during the transition. I'm trying to stop this from happening. Any thoughts? I've created a sample below to really illustrate the point. http://jsfiddle.net/fz7qs/2/ <div id="pageContainer" style="position: relative !important; height: 100%;"> <div data-role="page" id="test1"> <div data-role="header"> <h1>Page Title</h1> </div> <a id="page2link">To Page 2</a> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> <div data-role="page" id="test2" style="height: 568px"> <div data-role="header"> <h1>Page 2</h1> </div> <a id="page1link">To Page 1</a> <div data-role="content" style="height: 50%;"> <p style="height: 80%; border: 1px solid black;">This is page 2</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div>

Tags (comma-separated) Cancel