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


Experimenting with Adobe AIR and jQuery – Part 5

Part 5 of my Top100-application was a simple change: until now, the items on the page (number, artist and title) moved off the screen, then the background color changed, and then the next items moved on the page.

I didn’t like the sudden change of the background, so I decided to embed all items into another div-tag, and change the background of the div, rather than the whole body:

The css now looks like this (I added a background image to the body so there is something displayed when the text slides):

And this is the jquery-code:

The result is that everything slides off and on the screen, with a different background:
example of sliding div (1) … example of sliding div (2)


♦ Related files: step5.html