I'm tryng to have some fun with animations in a phonegap application using jquery.
At the moment, I have one div with the main menu of the application, then I have 2 other divs that I will be switching with one another.
Say, it's something like this:
<a href="switchPage('page1.html')">Page 1</a>
<a href="switchPage('page2.html')">Page 2</a>
<div id="div1"><iframe id="frame1" src="mainpage.html"></iframe></div>
<div id="div2" style="display:none;"><iframe id="frame2"></iframe></div>
So.... when I click on any of those two links, I check which is the visible div, then I hide this div, I ask the iframe in the other div to have the src pointing to the desired page, then I ask this second div to show up. Everything works fine and dandy.... it it weren't for the fact that the iframe is taking up all of the available space instead of keeping itself in the div's class-defined size. Both are like this:
I have different background colors to see what room they are taking.
Now, if I don't change the src of the iframe I see the color change in the space of both divs. Nice and dandy.... however, if I set the src of the iframe, instead of the new pointed page taking up the divs room, it takes the whole visible space instead (my menu disappearing).
What's going on?
PS I'm doing a direct iframe.src="blah" and iframe.setAttribute("src", "blah") and it's the same result.