jQuery Forum

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)