The jQTouch Blog

TextMate Bundle for jQTouch

Tue, 16 Feb 2010 12:05:36 -0800

Jonathan Stark has created a TextMate bundle for jQTouch. It’s an early release, but looks quite functional—there’s a video after the link. Download it and help improve it!

Campaign Monitor, my favorite app for sending email campaigns,...

Wed, 03 Feb 2010 12:12:23 -0800

Campaign Monitor, my favorite app for sending email campaigns, has released a gorgeous iPhone version of their app, built on jQTouch.

Railscasts

Mon, 01 Feb 2010 10:44:33 -0800

Railscasts:

This week’s Railscasts episode shows how to alter your site’s display on mobile and incorporates jQTouch.

"Today, things have changed. With support from tools like jQTouch, it’s shockingly easy to..."

Mon, 01 Feb 2010 08:59:50 -0800

“Today, things have changed. With support from tools like jQTouch, it’s shockingly easy to create apps that feel like they belong on the iPhone using HTML, CSS, and JavaScript.”

- O’Reilly Radar, Web developers can rule the iPad

Meet jQTouch is a new installment in the PeepCode Screencasts,...

Tue, 29 Dec 2009 09:42:56 -0800

Meet jQTouch is a new installment in the PeepCode Screencasts, made by Geoffrey Grosenbach, which offers an absolutely fantastic introduction to jQTouch. The screencast covers beginner level topics like structure and styling and also dives into some advanced Javascript/jQuery and Ajax. The episode costs $9 and is a little over an hour, with sample files included.

Scrolling on the iPhone

Wed, 16 Dec 2009 10:52:53 -0800

John Gruber:

Showtime looked good when I first saw it a few weeks ago, and it looks even better today. It looks like a great native iPhone app. It just doesn’t feel like one, and scrolling is the main reason. I also believe that iPhone web app developers need to be careful about creating controls that look like native iPhone controls, but act different. Showtime uses On/Off toggle buttons that look just like the native ones, but the fake web ones can only be activated by tapping them. The real ones can be both tapped and slid. And my observations suggest most iPhone users slide them (including Phil Schiller in an on stage demo). If you have to tap them, better to use checkboxes, I say.

I agree, the scrolling is an issue. I’m going to investigate PastryKit to see how viable this hacked acceleration/fixed positioning is. The toggle is mostly laziness, however—this is certainly possible and I hope to implement in the next week or so. And yes, for those who are curious, this PastryKit research is taking precedence over the Tweetie throwdown, which I’ve been remiss through the moving chaos.

Reader Question: Turning Off Vertical Scrolling

Wed, 16 Dec 2009 00:28:34 -0800

Is there an easy way to disable vertical scrolling via jQTouch. I have an app that doesn’t require any vertical scrolling so I’d like to get rid of the rubberband effect when a user swipes the screen up or down vertically.

This is possible with some general iPhone programming, but do be careful (this will disable swipes as well…). Basically, you should be able to just use:

$('body').bind('touchmove', function(e){e.preventDefault()});

Reader Question: Press-and-hold on an image

Wed, 16 Dec 2009 00:08:26 -0800

Is there a way to support press-and-hold on an image? That would allow saving to iPhone’s Photos Camera Roll.

As you’ve noticed, jQTouch disables text and image selection by default in order to better imitate native apps. There’s a convenience class, however, to remedy this: Just add class="selectable" to the image you’re describing.

The jQTouch Mailing List

Mon, 14 Dec 2009 06:00:00 -0800

The jQTouch Mailing List:

For those who haven’t seen, I’ve started a new Google Group dedicated to jQTouch. This is a great place to ask beginner questions, show off your latest app, or discuss mobile web technology in general.

Showtime is a beautiful, simple jQTouch app which keeps track of...

Mon, 16 Nov 2009 09:38:36 -0800

Showtime is a beautiful, simple jQTouch app which keeps track of your favorite TV shows and lets you know when new episodes are available to watch.

Reader Question: Do you have a PSD file?

Fri, 13 Nov 2009 07:32:50 -0800

I’d like to mock sites up for my clients to see potential implementations of JQT and was wondering if you had a psd file so we can easily show mocks without actually having to do any coding.

We don’t have any sort of jQTouch-based PSD file, but if you haven’t already checked it out, I highly recommend the one from Teehan+Lax.

"jQTouch helped me to pull together a fully-functional mobile web app in less than 3 days. People..."

Thu, 29 Oct 2009 09:39:09 -0700

“jQTouch helped me to pull together a fully-functional mobile web app in less than 3 days. People viewing the demo thought it was a native iPhone app!”

- Andrew Hedges

Running jQTouch in PhoneGap

Thu, 29 Oct 2009 09:23:05 -0700

Running jQTouch in PhoneGap:

Jesse Macfadyen has discovered a way to improve the sluggish performance issue in jQTouch apps running in PhoneGap. For those who don’t know, PhoneGap is a great way to embed your web app into a native one and put it on the iTunes Store.

While organizing my laptop files on a flight this week, I...

Sat, 24 Oct 2009 13:20:50 -0700

While organizing my laptop files on a flight this week, I stumbled across the original design for jQTouch’s site and thought I’d share. I love seeing how far it’s come in under a year.

jQTouch Beta 2

Tue, 06 Oct 2009 10:59:00 -0700

jQTouch Beta 2:

The new beta of jQTouch is ready for download with a ton of enhancements and fixes. For those who don’t know, jQTouch is a jQuery plugin which helps create immersive experiences on the iPhone and iPod Touch. New in beta 2:

8 core page animations (including several 3d options) and the ability to easily add your own. See the animations running like butter in a demo video.
Support for custom extensions, including 4 built-in sample extensions for geo location, offline support, a “floaty” menu, and automatic title creation.
A public object now allows you to manipulate jQTouch dynamically with functions like goTo(), goBack(), and submitForm().
A “fast touch” feature is enabled by default, improving responsiveness up to 500% in some cases.

Check out the new preview on your iPhone and download a copy to play with today!

Mobile WebKit and jQTouch — Slides from 360iDev on Vimeo (via...

Mon, 05 Oct 2009 10:40:14 -0700

Mobile WebKit and jQTouch — Slides from 360iDev on Vimeo (via David Kaneda). Shows off some of the new features in beta 2, being released any moment now. Sorry, no audio for now.

Reader Question: Toolbars and Tabbars

Mon, 05 Oct 2009 09:03:23 -0700

Do you have any plan for adding Toolbar and Tabbar UI elements in near future?

I do not. This is a great question, as it’s one of the most requested features. The problem with toolbars and tabbars is that Mobile Safari doesn’t support position: fixed. Additionally, it also doesn’t fire an onscroll event continuously, like desktop Safari does. No, there’s only one way to hack fixed position items — taking over the touch events and simulating a user’s scroll or flick with CSS3 animations. The technique was pioneered by Cubiq and Doctyper. While I commend their efforts, the result doesn’t feel entirely native and requires a fair amount of code. So, for now, I’m avoiding the subject and instead focussing on cool effects and making jQTouch extensible. That in mind, I would welcome someone developing an extension for this sorta thing.

There has been one jQTouch feature which I have spent far more...

Mon, 05 Oct 2009 08:26:42 -0700

There has been one jQTouch feature which I have spent far more time working on than any other. It’s not a cool new 3d animation, it’s not detecting a swipe event, and it has nothing to do with Ajax. It’s the ability to remove a roughly 300ms onClick delay when tapping a link. Currently, in revision 100, this feature comes stock, though user’s can disable it with useFastTouch: false in their initialization options.

Background

The problem lies with a default gesture built into Mobile Safari: The “double tap”. By default, a double tap tells the browser to zoom in on an element. In jQTouch, we explicitly set the viewport not to scale, so double tapping doesn’t have any effect — it does, however, still mean that when a user taps quickly, Safari will wait a few hundred ms to see if they tap again. There is currently no way to stop the propagation after a user does a “Quick Finger Up,” as shown in the documentation diagram above.

I occasionally get messages on Twitter, like this one from Mel Gray:

Developing with jqTouch kinda sucks :-\ Its nice getting a theme out of the box, but its kind of slow…

Now, I work on jQTouch just about everyday. In regard to Javascript, I can promise you: It is not slow. The people making these comments (sorry to single you out, Mel!) may not fully understand why they feel the app is slow, but I know: The click delay. 300ms may not be a lot when clicking a link on a website, but when you’re trying to emulate native apps, it can mean the world.

The Technical

There is only one way around this delay, which is to fire our event (whether it’s custom or just a “click”) in the touchend event. Matteo Spinelli has done a great job of explaining this solution. Obviously, though, not all touchends are meant to be clicks or taps, so we first have to do a little check to make sure the user isn’t scrolling or anything. Once we know the user is trying to click, we fire away. But here’s the rub: We’ve just added our event to touchend, we haven’t disabled the delayed click that fires. Essentially, this means we’re firing two clicks: One immediate and one after the delay.

But, you say, “Is there no way to prevent the delayed click from firing?” There is. It is to call preventDefault() on either the touchstart or touchmove event. Doing so, however, removes the native ability to scroll when starting on one of these elements. Imagine being in an app like Mail, and not being able to scroll on the edge to edge list of messages. Not a pretty picture.

Ideally, we could call preventDefault() on the touchend event. Unfortunately, according to Apple’s documentation (and my millions of tests), this has no effect.

The Current Solution

The current solution in jQTouch, which is enabled with useFastTouch: true, uses a two pronged approach. First, I switch all of my related callback functions to use a custom event, “tap,” instead of the traditional “click.” Next, I proceed to take over and nullify all click events. While this works well in preventing links from being clicked and such, it has a variety of unwanted side effects — of which, I probably only know the half.

All of this being said, I’m still not convinced there isn’t a better way. If you have any ideas or experience with this subject, please, please let me know on Twitter and let’s discuss. As I mentioned at the start of this post: This is, and has been, the most important feature to me.

A preview of the “Floaty” extension, added in...

Fri, 02 Oct 2009 11:30:00 -0700

A preview of the “Floaty” extension, added in revision 92. Disclaimer: I made this screencast on a plane last night, with a good deal of turbulence…

Hippo is a new jQTouch app by Johan Brook which lets users...

Thu, 24 Sep 2009 08:15:32 -0700

Hippo is a new jQTouch app by Johan Brook which lets users search IMDB. This looks incredibly feature-packed — an excellent implementation of jQTouch.