onsdag den 29. august 2012

Slow onClick on iPhone and iPad


I was building a javascript-powered zip-code registration web page, with a numeric display which would be used to enter the zip-codes of guests at a company grand social function, to later determine where they came from. The screenshot below is what I came up with:


Your basic numeric display with digits, a 'clear' button and a 'undo latest' button. Upon entering a 4-digit zip, the 'display' automatically clears, ready for a new one.

But the app was to run exclusively as a web-app within an iPad, and what I found was that the onClick handlers I'd attributed to the buttons, which are actually DIVs, were slow to trigger, on both my version 1 and version 2 iPad. A bit of googling suggested I went with the touchstart event instead; which worked beautifully, the javascript associated with the events executed quickly and beautifully.

So to recap, in the $(document).ready(function () -section I did this:


$('.digit').bind("touchstart", function () {

var clickedValue = this.getAttribute("value");
// do something with the button's digit value here
}

... where '.digit' corresponds with the class I give my DIVs:

9

Give me a shout if you want the code, it's a Visual Studio 2010 c# web application. HTH someone in a similar bind.

onsdag den 15. august 2012

Prevent zooming on iPhone and iPad web apps

Had to google more than I thought I'd have to in regards to this one, so here's a blog entry to hopefully help others out. To disallow the user to zoom in and out on a web page as displayed on an iPad or iPhone, add this tag to the meta-tags section of the page header: This will prevent the user from zooming in or out on the screen. I saw a range of other attempts to prevent this, using javascript and such, but the above is your best option.