jQuery Forum

I'm new to JQM and as part of a test I've built I've been trying to create a main page with a header,content and footer div, which loads new content in to the content div from an external file. The header and footer should always remain in place however, and for this reason i've moved the header and footer outside of the Page div.

You can see my setup in action here:

It's pretty ugly I know, but it does at least demonstrate my problem. If you click one of the 6 buttons (they all load the same file) you'll see the new content slide in whilst the header and footer remain where they are. great! the long image is horizontally slideable on the sub page, using iScroll libraries.

Now, for the purposes of the dev I've made a little toolbar at the top left of the page. If you press the back button you should see the original page content slide in but then the page2 content appears over the top. At this point we're stuck.

I've begun to think it might have something to do with the width/height set that i've set on the page divs (as part of me laying out these pages) and/or what jqm is doing with styles underneath. If i take out the width/height declarations in the css on lines 64&65 it prevents the problem occurring, though it also breaks the scrolling js. However, this doesnt completely solve the problem, because if I do change the css as described above, and hit the back button when p2 content is loaded, the p1 content slides in, stays there, but the header and footer images flicker and maybe resize a little (hard to tell). if I repeat the process the header and footer dont flicker. So this leads me again to think that the css I've written, possibly in conjunction with the styles jqm is applying, is causing this to happen. but why only once?

I've set this app up to run from the iPad homescreen so you'll see a better idea of what i'm talking about by loading the site in to safari and then saving it to the homescreen.

Anyway, I'd really love to know what I'm doing wrong here. I get the feeling that by trying to absolutely set the boundaries of the header,footer and page/content areas, i'm conflicting with the jqm stuff. but then, how would one do this otherwise??

The code is zipped here for anyone interested in a more convenient way of checking my content:

Would really really appreciate any insight/opinion!