Archive for category Javascript

Use tap events instead of click events in iPhone browser

Posted by Jon in Javascript, iPhone on June 18, 2010

When working on a web app for embedding in a iPhone application we came across jQTouch, a really nifty little jQuery plugin which makes it easy to create a web application UI that really resembles that of a native iPhone application.

We soon encountered a problem due to the fact that click events are rather slow to fire on the iPhone. There is a delay due to the fact that the iPhone waits for the user to complete a gesture before deciding that the intended gesture was in fact a click.

JQTouch uses divs to navigate between screens, so for example if you have the div

<div id="primary-view"></div>

you can simply navigate to it through a normal anchor link, and the transition will thanks to jQTouch be really “iPhone like”.

<a href="#primary-view">Primary view</a>

Our main problem is that we load our content dynamically through Ajax. So our links looked like this:

<a onclick="fetchContent();" href="#primary-view">Primary view</a>

This resulted in a race condition. The anchor link listens to the tap event which is fired much earlier than the click event, and therefore we mostly ended up in empty views. So we needed to replace all onclicks to ontap listeners. The problem then is that we could no longer test our webapp in a normal desktop based Safari browser.

So, we decided to happily go along and write inline onclick events on our links and other interaction elements. But while in the iPhone we see to it that the onClicks are removed and replaced with tap listeners.

That function looks like this:

function rebindClicks(){
    var userAgent = navigator.userAgent.toLowerCase();
    var isIphone = (userAgent.indexOf('iphone') != -1) ? true : false;
 
    if (isIphone) {
        // For each event with an inline onclick
        $('[onclick]').each(function() {
            var onclick = $(this).attr('onclick');
            $(this).removeAttr('onclick'); // Remove the onclick attribute
            $(this).bind("click", preventClickEvent); // See to it that clicks never happen
            $(this).bind('tap', onclick); // Point taps to the onclick
        });
    }
}
 
function preventClickEvent(event)  {
    event.preventDefault();
}

We now call this little function everytime the DOM is changed. If something turns up with an inline onclick. It is will be rerouted by jQuery to a tap listener instead.

Again, we felt we needed to do this because many of our developers do not have a Mac (and hence do not have the iPhone simulator). And testing on the iPhone can be really time consuming. So for testing during development we wanted to use onClick, and when testing on iPhone we wanted to use taps instead.

But the biggest bonus was without a doubt that things are overall much faster in the web application. Taps fire much faster than clicks in the iPhone.

Here’s how it looks running the same app both in desktop safari and embedded into the iPhone simulator.

, ,

No Comments

So you wanna be a front end developer?

Posted by Olle in Javascript on May 13, 2009

Back in the day when I was a young boy in the big IT-industry I wanted to become the greatest front end developer the web had seen. Due to circumstances, out of my hands of course, I did not reach my goal, but I did get to “know” some great ones along the way!

So I guess you possibly have some schooling to bring to the table, or you have been working with back-end stuff stuff for quite some time, you know what object oriented programming is or at least want to learn, and most importantly you have the will to learn!

When I started to become really interested in front end development back in the late 90’s, front end development was not looked upon as real programming, real programming was C++, Java and the likes. But now, we have job titles like Senior Front End Developer at for instance Yahoo and Google, so I guess that the understanding of the importance of good front end code has really elevated.

So my way of learning the craftsmanship, was to study the masters below, downloaded their code, read it, and then write my own! If it worked for me, I’m sure it will for you!

Scott Andrew LePera
What really got me started was a guy named Scott Andrew LePera(http://www.scottandrew.com/). He got me all warm and fuzzy talking about for instance event handlers in javascript and how event bubbles

Aaron Boodman
After that I stumbled over Aaron Boodman, the youngpup (and creator of Greasemonky among things) showed me all about how to create the menus that we love to have, how to make the Javascripts run smooth in animations, and how drag of elements shall be done. Back in the beginning of the 2000 he had the coolest UI on his blog, and nothing I have seen since has turned me on as much as viewing youngpup.net for the first time(except possibly 13thparallel)!

13thparallel
13thparallel made me think about coding for portability, introduced me to the concept of the Viewport among other things.

WebFX
Emil A Eklund and Erik Arvidsson at WebFX showed me that it was possible to create a forum on the web with outstanding functionality and speed(unfortunately it only looks good in MS IE), how to work with XML in advanced Javascript.

Peter-Paul Koch @Quirksmode
Quirksmode helped me really understand the differences between browsers and what do do about it. He also really introduced me to Unobtrusive JavaScript.

Remember that most of the examples above have been written back in 2001-2002, and they still work..What does this tell us, well to use the standards, and no browser specific hack, because browsers change and you will end up chasing your own tail to make things work in new browsers.

No Comments