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!

I'm new to using jqm to build a webapp for the ipad. I've read the docs and have a rough idea how the layouts work (i.e. page/header/content/footer) and have started pulling together a demo for a project I have on the go.

I've structured the index page as so:

2. <div id="srf-homeheader"> 
3.         <img id="srf-head-image" src="img/src_header.png" />
4. </div>
5.     <div id="srf-main-page" data-role="page">
6.         <div id="srf-content" data-role="content" > 
7.             <ul id="main-menu-list">
8.                 <li><a href="external-content-1.html"><img src="img/src_main_btn1.png" /></a></li>
9.                 <li><a href="external-content-1.html"><img src="img/src_main_btn2.png" /></a></li>
10.                 <li><a href="external-content-1.html"><img src="img/src_main_btn3.png" /></a></li>
11.                 <li><a href="external-content-1.html"><img src="img/src_main_btn4.png" /></a></li>
12.                 <li><a href="external-content-1.html"><img src="img/src_main_btn5.png" /></a></li>
13.                 <li><a href="external-content-1.html"><img src="img/src_main_btn6.png" /></a></li>
14.             </ul>
15.         </div>
16.     </div>
17.     <div id="srf-footer"> 
18.     </div>

As you've probably spotted, I've purposely created a header and footer div outside of the page div. Within the page div I have a content div, where I have some images that I use to link to external content files.

I've structured it this way because I always want the same header and footer image/html to remain on screen, with just the content area updating depending upon what link is clicked and when.

Clicking one of the external links will successfully pull in the external-content-1.html file content and slide it in to view - very nice - however I always see a flicker of the header and foot images. Note that as a test I added an <img> tag to the header and used a css background-image for the footer, but both continue to flicker.

The other thing of possible note here is that when I click back from the external content, and the above content page is reshown, the header/footer image does not flicker.

Also, when I click the external link or go back, I see that the content area size crops to some other size first. I suspect this is a css mistake on my part but I have set that content div to be the exact pixel size i require, so i'm not sure why the div (or another div) would resize when I click a link. Here's the css:

I get the feeling I'm missing something blatantly obvious here but as a n00b I could do with someone pointing me in the right direction and/or commenting on my html structure, if it's incorrect.

Many thanks

Lee

p.s. I tried using a cache manifest file and defined the images by name in there, but still the flicker occurs. I think I saw somewhere that applying in the css a transform3d(0,0,0) on the image would also cache them but I havent tried this as yet.

p.p.s. this project is designed to run locally on an ipad, whereas i've been testing remotely for dev purposes - not sure if this would have anything to do with the flicker. (wouldnt expect so but mentioning just in case)