I can't get mailto links to open the Mail app from Mobile Safari when using jQTouch. What could be wrong?

Question

I\'m developing an iPhone web app using jQTouch, and it contains a simple mailto: link to a valid email address, which should launch the iPhone mail application

Answer 1

I found that adding target="_blank" to the links worked -- except that on some desktop browsers, it opened a new blank window AND opened the email window. Granted, jqtouch sites aren't typically going to be viewed on desktop browsers, but I wasn't fond of that behavior.

Instead, here's what I did:

• Put the mailto: link in the onclick event and added return false (so actual link to # doesn't fire)
• Added a noHighlight class to the link

Here is an example:

Email me

I then modified the CSS in the theme file.

Before:

ul li a.active {
   background: #194fdb url(img/selection.png) 0 0 repeat-x;
   color: #fff;
}

After:

ul li a.active:not(.noHighlight) {
   background: #194fdb url(img/selection.png) 0 0 repeat-x;
   color: #fff;
}

The reason I added the noHighlight class is that without it, the button would get highlighted and would "stick" which made the button look like it was still in some active state. To get around the issue, I added the class and modified the CSS as described above.

What the CSS change does is that if the link (inside of a li which is inside of a ul) has the class noHighlight, it will NOT change the background or text color.

Seems to work great now on both desktop and mobile browsers.