Kris’s Box

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

$(document).keyup(function(e) {
  if ( (e.keyCode>=48) && (e.keyCode<=57) )
    {
    // numbers (0..9)
    newnumber = newnumber+(e.keyCode-48);
    }

switch ( e.keyCode ) {
 case 13: // ENTER
  // switch to newnumber (if newnumber is number <= 100)
  var n = parseInt(newnumber);
  if ( (n>0) && (n<=100) )
    {
    currentnumber = n;
    // 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);
        });
      });
    }
  newnumber = '';
  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>=48) && (e.keyCode<=57) )
    {
    // numbers (0..9)
    if ( !((e.keyCode==48) && (newnumber == '')) )
      // don't start with 0 --> will be interpreted as octal
      {
      newnumber = newnumber+(e.keyCode-48);
      }
    }
  else if ( (e.keyCode>=96) && (e.keyCode<=105) )
    {
    // numbers (0..9) on numeric keypad
    if ( !((e.keyCode==96) && (newnumber == '')) )
      // don't start with 0 --> will be interpreted as octal
      {
      newnumber = newnumber+(e.keyCode-96);
      }
    }

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 ) {
...
  case 8: // backspace
    // reset newnumber
    newnumber = '';
    break;

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

<?xml version="1.0" encoding="utf-8" ?>
<top100>
<record>
  <number>1</number>
  <artist>Captain &amp; 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();
$.get('top100.xml', function(xml){ 
  lijst = $.xml2json(xml);
  }); 

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

{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

(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);
  for ( var rec in lijst.record )
    {
    numbers[lijst.record[rec]['number']] = rec;
    }

This results in

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

I could now use

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:

var currentnumber = 100;
$.get('top100.xml', function(xml){
  lijst = $.xml2json(xml);
  for ( var rec in lijst.record )
    {
    numbers[lijst.record[rec]['number']] = rec;
    }
  $("#number").text(currentnumber);
  $("#artist").text(lijst.record[numbers[currentnumber]]['artist'].toUpperCase());
  $("#title").text(lijst.record[numbers[currentnumber]]['title'].toUpperCase());  
});

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

♦ Related files: step6.html

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:

<div id="mainp">
  <div id="number">47</div>
  <div id="artist">SEAL</div>
  <div id="title">KISS FROM A ROSE</div>
</div>

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

body, p {
    font-family:"Arial Rounded MT Bold", "Arial", sans-serif;
    font-size: 20px;
    color: #FFFF00;
    background-color: #000000;
    margin: 0;
    padding: 0;
    text-align: center;
}
body {
	background-position:center;
	background-image:url(images/top100fuif.gif);
	background-repeat:no-repeat;
}
#mainp {
    background-color: #0000FF;
}

And this is the jquery-code:

$(document).ready(function() {
  $(document).keyup(function(e) {
    switch ( e.keyCode ) {
      case 38: // up
        $("#mainp").hide("slide", { direction: "left" }, 1500, function(){
          $("#mainp").css("background-color","#00AA00");
          $("#number").text("48");
          $("#artist").text("VENGABOYS");
          $("#title").text("WE LIKE TO PARTY");
          $("#mainp").show("slide", { direction: "right" }, 1500, function(){
            $("#number").effect("pulsate", { times:3 }, 1000);
            });
          });
        break;
      case 32: // space
      case 40: // down
        $("#mainp").hide("slide", { direction: "right" }, 1500, function(){
          $("#mainp").css("background-color","#FF0000");
          $("#number").text("46");
          $("#artist").text("SASH");
          $("#title").text("ECUADOR");
          $("#mainp").show("slide", { direction: "left" }, 1500, function(){
           $("#number").effect("pulsate", { times:3 }, 1000);
            });
          });
        break;
      }
    });
  });

The result is that everything slides off and on the screen, with a different background:
 … 

♦ Related files: step5.html