For the next version of Jamtris I would very much like to have some feedback from you! I want to know which features you want to see in the next version of this popular game. Features that definitely will make it into the next version are

• The ability to turn off the game and continue at a later time
• A small indicator of current time (for when you’re playing Jamtris while waiting for the bus, for example)
• An alternative pause button (for phones that don’t properly map the current pause button)

Please add a comment below with your other wishes for the next version!

Due to the great interest in my little php-upload-with-progress-bar script I have now created a sourceforge project for it and released a new version of the code, based on all the great feedback in the original blog post. The new version can be downloaded here. The changes are mostly to make it easier to get started with the script. If you’ve already got it working, don’t bother downloading this one.

If you’ve got ideas for the next version, please leave a message in the comments or on the Sourceforge project page. Already planned features for next version are ability to print progress (in percentages), as suggested by Travis, and download speed.

The script has also been given a name, tesUpload, and a permanent home.

After a great suggestion in the comments to the original article I have now added the ability to chain several spinboxes so that when one reaches it max value, another one is updated. To do this, simply create two spinboxes and then call registerOverflowObserver() on the first one with the second one as an argument. An example:

 m = new SpinBox('minutes',0,59);
 h  = new SpinBox('hours',0,23);
 m.registerOverflowObserver(h);

Now whenever the first spinbox gets below 0 or above 59, the second one will be decreased or increased by 1. This is useful when you want to use spinboxes to enter time, which is one of the most common things spinboxes are used for.

The demo has been updated to display this new functionality. I have also created a sourceforge project for the spinbox which can be found here, so if you need any kind of support or want to file a bug then please go there.

The complete archive can be downloaded here.

Recently I was asked by a client if it would be possible to use a spinbox for a certain value in a web application I was building. Being totally sure this was going to be a piece of cake I said yes (it’s just a textbox with two arrows, right?). As it turns out, it is possible, only a little bit more complicated than I first thought.

The Spinbox

The spinbox is also called spinbutton, spincontrol or UpDown button. You can see it in the picture on the right. It is commonly used to enter, for example, time and dates in desktop applications but isn’t available as an HTML form element.

Placing the arrows

The greatest challenge by far was positioning the arrow images. I started trying to do it using css, but soon gave up when I encountered too many browser inconsistensies, bugs and missing features (such as missing inline-block in Firefox), and decided to do it the old-fashioned way instead: using tables. In my solution, a table is created dynamically around the textbox and made inline so that more than one spinbox can be laid out on the same line. Only problem is, Firefox and IE both don’t understand display:inline-table, they want display:inline instead, which Safari & Opera don’t like. The solution to that:

table.style.display='inline';
try {
    table.style.display = 'inline-table';
} catch(e) {}

Firefox just silently drops the inline-table declaration that it doesn’t understand but IE throws and error. That’s why the try/catch statement is needed.

PeriodicalExecuter

When one of the arrows is clicked, the value in the textbox should increase or decrease while the mouse button is held down. To accomplish this I created a Prototype PeriodicalExecuter which updates the textbox with increasing frequency. Only problem is, for some reason they’ve decided to not include a stop method for the PeriodicalExecuter. Luckily, someone else also ran into this problem. I’ve included that solution in my source.

Disable context menu

In Firefox on Mac, the context menu pops up when you hold down the left mouse button for a second or so anywhere in the window. This is obviously a bit annoying when you are trying to use the spinbox. Turns out that you can stop it from happening by denying the onContextMenu action from firing. In Prototype code:

Event.observe(img,'contextmenu',function(evt){Event.stop(evt);});

In HTML this would be:

<img src="pic.gif" oncontextmenu="return false;">

Files

Download the files here: tesSpinbox. You can try a live demo here: Demo.

Usage

Include prototype first, and then spinbox.js. Change the path to the images in spinbox.js (sb_imgpath) to point to where you uploaded the images. Then to convert any textbox into a spinbox:

new SpinBox(id_of_textbox,min_value,max_value,padded_length);

Padded_length is the desired length of the string in the textbox. If the string is shorter than this value, it will be padded with zeros. A padded_length of 3 would mean that 7 becomes 007, for example. A spinbox example:

<input type="text" id="myspin" size="2">
<script language="javascript">
    new SpinBox('myspin',0,59);
</script>

Will turn the textbox into a spinbox with a minimum value of 0, maximum value of 59 which is not zero-padded at all.

I really like iTunes. In fact, after the first time I saw it running on a Mac I desperately searched for a similar application for Linux and almost considered writing one myself (not being 100% happy with Rhythmbox). I instantly knew that was the way I wanted my music organised. After my switch I find that, while good, iTunes is not perfect. My main problem with it is that while you can decide which column you want to order your music by, you can’t select which column it looks at when two songs have the same value in that column. For example, if you order by Artist it will order the songs by Artist, Album. This means that the albums by a certain artist will be sorted alphabetically, while I want them sorted by year. I find that that’s how I order the albums in my head, so it takes a while for me to find the album I’m looking for when they are sorted alphabetically.

The Solution

If you right click a column header in iTunes, you are able to select which fields are shown. My idea was to put the sort information I wanted into one of these fields. I settled for Grouping, since it’s one of the fields you can change when you edit the properties of a song. If I put the name of the artist followed by year and then by album into this field, sorting by this field should mean the songs are sorted the way I want them to be. Naturally, manually entering the information into this field would be quite tedious, so I wrote a quick Applescript to do it for me.

The Code

tell application “iTunes”
  if selection is not {} then
    repeat with this_track in selection
      set this_year to (get this_track’s year)
      set this_artist to (get this_track’s artist)
      set this_album to (get this_track’s album)
      if this_year > 0 then
        set this_track’s grouping to this_artist & “,” & this_year & “,” & this_album
      else
        set this_track’s grouping to this_artist & “,” & this_album
      end if
    end repeat
  else
    display dialog “Select some tracks first…” buttons {“Cancel”} default button 1 with icon 2
  end if
end tell 

Instructions

Copy and paste this code into a file (or download it here). Save the file to Library/iTunes/Scripts/ in your home directory (you might have to create the Scripts directory if it doesn’t exist). The script should now show up in the scripts menu in iTunes. Select a few songs and then select the script from the scripts menu. The songs’ artist, year and album should be written to the grouping field. To sort by this field, right-click a column header and click grouping in the list that pops up. Click the grouping header once to sort by this field. Done! To get easier access to this script you can bind it to a shortcut key, see here.