Prevent jQTouch Links Going Back or to Homepage

February 23rd, 2011 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.

Thanks to jQTouch making apps for the iOS (and infact any platform) can now be achieved with nothing more than knowledge of HTML, CSS and jQuery. The purpose of this post isn’t to tell you how to make one of these apps (for that I recommend this excellent tutorial) but rather to explain an annoying scenario that I faced during the process.

The Problem

I will presume that in reading this post you already have knowledge of jQTouch and are here due to experiencing the issue in the title; that a link on your page is taking you back a step, or to the homepage, despite you specifying a ‘href’ attribute and the target div existing.

I faced this exact scenario and was stumped for quite a while, especially after not being able to find a solution elsewhere on the web.

Behold… The Solution

After much rejigging and debugging I finally discovered the problem was that the issue was not with the link, but rather it’s placement in the page in that it was nested inside a div. A simplified version of a non-working page can be seen below:

<div id="about">
	<div class="toolbar">
		<h1>About Us</h1>
	</div>
	<div>
		<a href="#contact">Contact Us</a>
	</div>
</div>
<div id="contact">
	<div class="toolbar">
		<h1>Contact Us</h1>
	</div>
</div>

Solution 1

In the above example notice how the link to the ‘Contact Us’ panel is inside a div. I am unsure as to why this doesn’t work but for me I was getting redirected to wrong place. The solution was to instead place the link ouside of the div and, if required, into an unordered list. An amended working version would now look like so:

<div id="about">
	<div class="toolbar">
		<h1>About Us</h1>
	</div>
	<ul>
		<li><a href="#contact">Contact Us</a></li>
	</ul>
</div>
<div id="contact">
	<div class="toolbar">
		<h1>Contact Us</h1>
	</div>
</div>

Solution 2

One of the jQTouch initialisation options is ‘slideSelector’. Any defined selectors in this comma delimited string will act as an identifier to jQTouch alerting the plugin to which links should cause the application to slide to the relevant page. Let’s take the original example and make it work:

The JavaScript:

$.jQTouch({
	slideSelector: 'body > * > ul li a, .slide'
});

The HTML:

<div id="about">
	<div class="toolbar">
		<h1>About Us</h1>
	</div>
	<div>
		<a href="#contact" class="slide">Contact Us</a>
	</div>
</div>
<div id="contact">
	<div class="toolbar">
		<h1>Contact Us</h1>
	</div>
</div>

Notice how we’ve added the ‘.slide’ class as a selector and then added that class to the link itself.

With any luck you will now be getting taken to the correct page when the link is clicked (or should I say tapped). Simple huh? Now go get coding ;)

This entry was posted on Wednesday, February 23rd, 2011 at 9:49 pm by +Steve Marks and is filed under (X)HTML / CSS, Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (2)
  1. Peter says:

    Thank you so much!

  2. pxmarco says:

    you saved my day :)