Enable jQuery UI actions on touch devices

I recently bought an iPad. I’ve been refusing to do so, for a variety of reasons, but the new iPad was too good to continue to ignore. And I’m loving it.
One issue I discovered, however, was that some of my websites did not function properly. I’m using jQuery UI on some pages, but that user interface library does not support the use of touch events.
Luckily, a simple hack brought relief. Nice work guys!


Experimenting with Adobe AIR and jQuery – Part 7

In Step 7 of my Top100-application, I wanted to be able to enter a number and press ENTER, to immediately go to that specific number in the list. This is very similar to the ability in PowerPoint to move to a specific slide by just typing the slide number and pressing ENTER in Slide Show mode.

That piece was pretty easy with jQuery:

This worked, but only when using the numbers at the top of the keyboard. From the Keyboard Events page on Javascript Madness I learned that the keyCodes for the numbers on the numeric keypad are different (well, in IE, FireFox, Safari and Chrome, not in Opera): pressing the 1 key at the top results in keyCode 49, pressing 1 on the numeric keypad results in 97. So I had to add another series of keyCodes (96..105).
Also, I noted that when I started with a 0, I did not get the result I expected. Typing 055 ENTER resulted in number 45 being shown. After looking at Converting Javascript strings to numbers at the Javascript FAQ website, I realized the 0 at the start makes Javascript interpret it as an octal. So I included some code for that as well:

The final addition I made was support for the BACKSPACE key. If you accidentally typed the wrong number, pressing BACKSPACE would erase all input:

♦ Related files: step7.html


Experimenting with Adobe AIR and jQuery – Part 6

Until now, I had hard-coded the information about 3 songs in my Top100-application. It was time to make it dynamic, loading 100 songs from an XML-file.

The file looks like this:

So I looked for solutions to read an xml-file with javascript. Sure enough, jQuery had a solution: the XML-to-JSON jQuery plugin makes it really easy to do this.

The code

reads the file and puts the content into the JSON object lijst:

As an example, I can access the title of the number 1 song by using

(as javascript objects start numbering from 0). Obviously, this depends on the sequence of the songs in the xml-file, i.e. if the file would start with number 100 instead of 1, or if the sequence would be random, this would no longer work. As an xml-file by definition is not “sorted”, I needed to create an extra object to contain the object reference by song number:

This results in

I could now use

to get the artist information for the number 1 song.

To be able to move up and down, I needed an extra javascript variable to keep track of the current song number that is shown on the screen, and initialize the screen with that number:

I finally added 2 arrays to display various colors for the background and the text.

♦ Related files: step6.html