I am creating an android app using cordova v2.9 and jQuery mobile v1.3. I referred this page for creating a fixed footer. The issue is, when I load the page on android device, the footer is initially hidden. If I tap/click on the screen anywhere once, it appears. I have not written any css/js to hide the footer separately.
Based on the solutions here, I also tried data-tap-toggle="false", but it does not work. Can you guys out there help me in resolving this issue? Thanks.
Additional info
One thing I do is hide the parent container initially when app loads, and on click of a button later, show it. The footer and other content is inside the parent, so the footer too should be visible on clicking button. Below is the code for the parent container:
<div id="testTakingDiv" class="screen dontDisplay" style="width: 100%; margin: 0; padding: 0;">
<div data-role="navbar" data-iconpos="top" class="ui-body-a">
<ul>
<li><a data-icon="gear" href="#" id="testTimer">29:58:30</a></li>
<li><a data-icon="grid" href="#" id="showGridButton">Grid</a></li>
<li><a data-icon="delete" href="#" id="quitTestButton">Quit</a></li>
</ul>
</div>
<div>
<div id="questionText" style="margin-top: 2%; padding: 1%;"></div>
<div id="optionsText" style="margin-top: 2%; padding: 1%;"></div>
</div>
<div data-role="footer" data-position="fixed" data-id="quesOptions" data-tap-toggle="false">
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a id="markQuesButton" href="#" style="background: #4E387E;" data-icon="star">Mark</a></li>
<li><a id="skipQuesButton" href="#" style="background: #F70D1A;" data-icon="forward">Skip</a></li>
<li><a id="saveQuesButton" href="#" style="background: #437C17;" data-icon="check">Save</a></li>
</ul>
</div>
</div>
</div>
