I’m new to jQTouch — it’s pretty awesome — but I’m finding that I’m not able to get it to work out of the box for my HTML, even though I’m following the getting started guide as well as the markup guidelines.
Specifically, each of my screens is a <section> element (direct child of <body>) with a unique ID, and I have links to those IDs, e.g. <a href="#screen-a">. This seems to follow the convention of the demo code, but yet the demo code works and my code doesn’t.
Here is the HTML structure of my <body>:
<section id="main-menu">
<header class="toolbar"><!-- ... --></header>
<nav>
<ul>
<li class="arrow"><a href="#screen-a">Screen A</a></li>
<li class="arrow"><a href="#screen-b">Screen B</a></li>
<li class="arrow"><a href="#screen-c">Screen C</a></li>
</ul>
</nav>
<footer><!-- ... --></footer>
</section>
<section id="screen-a"><!-- ... --></section>
<section id="screen-b"><!-- ... --></section>
<section id="screen-c"><!-- ... --></section>
<script src="jquery.min.js"></script>
<script src="jqtouch.min.js"></script>
<script src="init.js"></script>
And my init.js simply initializes jQTouch (no custom options):
var jQT = new $.jQTouch({});
When I load my page, the UI appears fine, and I can confirm jQTouch was initialized because my jQT variable exists.
But when I click any link, the location bar changes to the new hash (e.g. “#screen-a”), but the UI doesn’t change. And the JavaScript console starts throwing repeated multiple No pages in history errors.
(When I use the unminified jQTouch.js, these errors come from inside the jQTouch goBack() function, which is being called from the dumbLoopStart() timer.)
Note that this happens for me both in desktop Safari and in Mobile Safari on the iPhone. But that’s very strange, because their demo works just fine for me on both.
I’ve banged my head against this for hours to no avail. Does anyone have ideas or suggestions or tips for what I might be doing wrong? Thanks!
I created an test from your provided example (with the addition of the style imports). Simply removing the <nav> elements resolved the issue for me.