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:

var newnumber = ''; // string to store numbers typed on keyboard

1	var newnumber = ''; // string to store numbers typed on keyboard

$(document).keyup(function(e) { <span style="color: #0000ff;"> if ( (e.keyCode&gt;=48) &amp;&amp; (e.keyCode&lt;=57) ) { // numbers (0..9) newnumber = newnumber+(e.keyCode-48); }</span>

1 2 3 4 5 6

$(document).keyup(function(e) { <span style="color: #0000ff;">  if ( (e.keyCode&gt;=48) &amp;&amp; (e.keyCode&lt;=57) )     {     // numbers (0..9)     newnumber = newnumber+(e.keyCode-48);     }</span>

switch ( e.keyCode ) { <span style="color: #0000ff;"> case 13: // ENTER  // switch to newnumber (if newnumber is number &lt;= 100) var n = parseInt(newnumber); if ( (n&gt;0) &amp;&amp; (n&lt;=100) ) { currentnumber = n; </span> // same effect as down-key $("#mainp").hide("slide", { direction: "left" }, 1500, function(){ colornumber = currentnumber % bgcolors.length; $("#mainp").css("background-color",bgcolors[colornumber]); $("#mainp").css("color",textcolors[colornumber]); $("#number").text(currentnumber); $("#artist").text(lijst.record[numbers[currentnumber]]['artist'].toUpperCase()); $("#title").text(lijst.record[numbers[currentnumber]]['title'].toUpperCase()); $("#mainp").show("slide", { direction: "right" }, 1500, function(){ $("#number").effect("pulsate", { times:5 }, 1500); }); }); } <span style="color: #0000ff;">newnumber = '';</span> break;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

switch ( e.keyCode ) { <span style="color: #0000ff;"> case 13: // ENTER  // switch to newnumber (if newnumber is number &lt;= 100)   var n = parseInt(newnumber);   if ( (n&gt;0) &amp;&amp; (n&lt;=100) )     {     currentnumber = n; </span>    // same effect as down-key     $("#mainp").hide("slide", { direction: "left" }, 1500, function(){       colornumber = currentnumber % bgcolors.length;       $("#mainp").css("background-color",bgcolors[colornumber]);       $("#mainp").css("color",textcolors[colornumber]);       $("#number").text(currentnumber);       $("#artist").text(lijst.record[numbers[currentnumber]]['artist'].toUpperCase());       $("#title").text(lijst.record[numbers[currentnumber]]['title'].toUpperCase());       $("#mainp").show("slide", { direction: "right" }, 1500, function(){         $("#number").effect("pulsate", { times:5 }, 1500);         });       });     }   <span style="color: #0000ff;">newnumber = '';</span>   break;

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:

if ( (e.keyCode&gt;=48) &amp;&amp; (e.keyCode&lt;=57) ) { // numbers (0..9) <span style="color: #0000ff;">if ( !((e.keyCode==48) &amp;&amp; (newnumber == '')) ) // don't start with 0 --&gt; will be interpreted as octal</span> { newnumber = newnumber+(e.keyCode-48); } } <span style="color: #0000ff;">else if ( (e.keyCode&gt;=96) &amp;&amp; (e.keyCode&lt;=105) ) { // numbers (0..9) on numeric keypad if ( !((e.keyCode==96) &amp;&amp; (newnumber == '')) ) // don't start with 0 --&gt; will be interpreted as octal { newnumber = newnumber+(e.keyCode-96); }</span> }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

if ( (e.keyCode&gt;=48) &amp;&amp; (e.keyCode&lt;=57) )     {     // numbers (0..9)     <span style="color: #0000ff;">if ( !((e.keyCode==48) &amp;&amp; (newnumber == '')) )       // don't start with 0 --&gt; will be interpreted as octal</span>       {       newnumber = newnumber+(e.keyCode-48);       }     }   <span style="color: #0000ff;">else if ( (e.keyCode&gt;=96) &amp;&amp; (e.keyCode&lt;=105) )     {     // numbers (0..9) on numeric keypad     if ( !((e.keyCode==96) &amp;&amp; (newnumber == '')) )       // don't start with 0 --&gt; will be interpreted as octal       {       newnumber = newnumber+(e.keyCode-96);       }</span>     }

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

switch ( e.keyCode ) { ... <span style="color: #0000ff;"> case 8: // backspace // reset newnumber newnumber = ''; break;</span>

1 2 3 4 5 6

switch ( e.keyCode ) { ... <span style="color: #0000ff;">  case 8: // backspace     // reset newnumber     newnumber = '';     break;</span>

♦ Related files: step7.html

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:

&lt;?xml version="1.0" encoding="utf-8" ?&gt; &lt;top100&gt; &lt;record&gt;   &lt;number&gt;1&lt;/number&gt;   &lt;artist&gt;Captain &amp;amp; Tennille&lt;/artist&gt;   &lt;title&gt;Do That To Me One More Time&lt;/title&gt; &lt;/record&gt; &lt;record&gt;   &lt;number&gt;2&lt;/number&gt;   &lt;artist&gt;Irene Cara&lt;/artist&gt;   &lt;title&gt;Fame&lt;/title&gt; &lt;/record&gt; ... 

1 2 3 4 5 6 7 8 9 10 11 12 13

<?xml version="1.0" encoding="utf-8" ?> <top100> <record>   <number>1</number>   <artist>Captain & Tennille</artist>   <title>Do That To Me One More Time</title> </record> <record>   <number>2</number>   <artist>Irene Cara</artist>   <title>Fame</title> </record> ...

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

var lijst = new Object(); <span style="color: #0000ff;">$.get('top100.xml', function(xml){    lijst = $.xml2json(xml);   }); </span>

1 2 3 4

var lijst = new Object(); <span style="color: #0000ff;">$.get('top100.xml', function(xml){    lijst = $.xml2json(xml);   }); </span>

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

{record:[ { number:1, artist:'Captain &amp; Tennille', title:'Do That To Me One More Time' }, { number:2, artist:'Irene Cara', title:'Fame' },  ... ]}

1 2 3 4 5

{record:[   { number:1, artist:'Captain & Tennille', title:'Do That To Me One More Time' },   { number:2, artist:'Irene Cara', title:'Fame' },    ... ]}

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

lijst.record[0].artist

1	lijst.record[0].artist

(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:

var numbers = new Object(); var lijst = new Object();  $.get('top100.xml', function(xml){    lijst = $.xml2json(xml); <span style="color: #0000ff;">  for ( var rec in lijst.record )     {     numbers[lijst.record[rec]['number']] = rec;     }</span>

1 2 3 4 5 6 7 8

var numbers = new Object(); var lijst = new Object();  $.get('top100.xml', function(xml){    lijst = $.xml2json(xml); <span style="color: #0000ff;">  for ( var rec in lijst.record )     {     numbers[lijst.record[rec]['number']] = rec;     }</span>

This results in

numbers[1] --&gt; 0, number[2] --&gt; 1, ...

1	numbers[1] --> 0, number[2] --> 1, ...

I could now use

list.record[numbers[1]]['artist']

1	list.record[numbers[1]]['artist']

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:

<span style="color: #0000ff;">var currentnumber = 100;</span> $.get('top100.xml', function(xml){ lijst = $.xml2json(xml); for ( var rec in lijst.record ) { numbers[lijst.record[rec]['number']] = rec; } <span style="color: #0000ff;"> $("#number").text(currentnumber); $("#artist").text(lijst.record[numbers[currentnumber]]['artist'].toUpperCase()); $("#title").text(lijst.record[numbers[currentnumber]]['title'].toUpperCase()); </span> });

1 2 3 4 5 6 7 8 9 10 11

<span style="color: #0000ff;">var currentnumber = 100;</span> $.get('top100.xml', function(xml){   lijst = $.xml2json(xml);   for ( var rec in lijst.record )     {     numbers[lijst.record[rec]['number']] = rec;     } <span style="color: #0000ff;">  $("#number").text(currentnumber);   $("#artist").text(lijst.record[numbers[currentnumber]]['artist'].toUpperCase());   $("#title").text(lijst.record[numbers[currentnumber]]['title'].toUpperCase());  </span> });

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

♦ Related files: step6.html