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!

Answers


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.


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>

Need Your Help

Why is MouseMove event firing when left mouse is clicked only for MouseDown event?

.net events delphi-prism mousemove mousedown

Either I am not totally understanding how events work or Delphi Prism has gone mad!!!

Grab id from another model and then save it into a new model

ruby-on-rails ruby ruby-on-rails-3 model associations

Really trying to get my head around the following situation. I am grabbing football results via a screen scrape and saving them to a model (result), ok so far.... I have some associations setup be...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.