CODEWITHSUNDEEP
htmljqtouch
Aseem Kishore
Aseem Kishore

Reputation: 10898

Why is jQTouch not working out of the box for my HTML?

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!

Upvotes: 0

Views: 1755

Answers (2)

jt.
jt.

Reputation: 7705

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.

Upvotes: 1

jt.
jt.

Reputation: 7705

I believe your main elements have to be div's. Additionally, you need a class of "current" on the div that should be displayed first. I don't know if the version you are using requires this, but what I pulled via git a while back requires that all of your main elements be contained in a div with an id of "jqt".

<div id="jqt">
   <div id="main-menu" class="current">
       <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>
   </div>

   <div id="screen-a"><!-- ... --></div>
   <div id="screen-b"><!-- ... --></div>
   <div id="screen-c"><!-- ... --></div>
</div>

<script src="jquery.min.js"></script>
<script src="jqtouch.min.js"></script>

Upvotes: 0

Related Questions