I rattled together an AppleScript to do just that and copy the result, including the track and artist name, to your clipboard.

tell application "Spotify"
	set theTrack to name of the current track
	set theArtist to artist of the current track
	set theAlbum to album of the current track
	set track_id to id of current track
end tell

set AppleScript's text item delimiters to ":"
set track_id to third text item of track_id
set AppleScript's text item delimiters to {""}
set realurl to ("http://open.spotify.com/track/" & track_id)

set theString to theTrack & " - " & theArtist & ": " & realurl
set the clipboard to theString

“Feel Like Makin’ Love – Bad Company: http://open.spotify.com/track/3HKthdb7Ejnydb74BvmQW0”

I used a few bits of this Ceonceited Software forum post for pointers on accessing Spotify details via AppleScript.

Enjoy,
- Chris

I’ve written a small PHP function to convert a given date to one of the following formats:

• Dates before Feb 1963
  • [YEAR]
  • i.e. “1960″, “1962″
• Dates from Feb 1963 – August 2001
  • [SUFFIX/PREFIX LETTER] ([YEAR])
  • i.e. “V (1999)”, “A (1983)”
• Dates from September 2001 onwards
  • [AGE IDENTIFIER] ([YEAR])
  • i.e. “57 (2007)”, “57 (2008)”, “60 (2010)”

/* getRegistrationCode *********************************************
 * Get the age identifier from a UK vehicle registration plate from
 * a given date.  Returns the identifier as a string with the year
 * of registration in brackets.
 *
 * $registrationDate    The date of registration to be converted
 *
 * return                String representation of the registration
 *                         date
 ******************************************************************/
function getRegistrationCode( $registrationDate ) {
    $reg      = $registrationDate;

    $year     = (int) date( "Y", strtotime( $registrationDate ) );
    $month    = (int) date( "n", strtotime( $registrationDate ) );
    $date     = date( "Y-m-d", strtotime( $regestrationDate ) );

    /* < FEBRUARY 1963 *********************************************
     * If the registration year is 1962 or before then just return
     * the year
     **************************************************************/
    if( $date < "1963-02-01" ) {

        $reg    = "".$year;

    /* FEBRUARY 1963 - AUGUST 2001 *********************************
     * For registrations from 1963 to August 2001 look up the
     * appropriate registration letter
     **************************************************************/
    } elseif( $date <= "2001-08-31" ) {

        $yearLetters    = array(
            "1963-02-01"    => 'A',    // 1 Feb 1963 – 31 Dec 1963
            "1964-01-01"    => 'B',    // 1 Jan 1964 – 31 Dec 1964
            "1965-01-01"    => 'C',    // 1 Jan 1965 – 31 Dec 1965
            "1966-01-01"    => 'D',    // 1 Jan 1966 – 31 Dec 1966
            "1967-01-01"    => 'E',    // 1 Jan 1967 – 31 Jul 1967
            "1967-08-01"    => 'F',    // 1 Aug 1967 – 31 Jul 1968
            "1968-08-01"    => 'G',    // 1 Aug 1968 – 31 Jul 1969
            "1969-08-01"    => 'H',    // 1 Aug 1969 – 31 Jul 1970
            "1970-08-01"    => 'J',    // 1 Aug 1970 – 31 Jul 1971
            "1971-08-01"    => 'K',    // 1 Aug 1971 – 31 Jul 1972
            "1972-08-01"    => 'L',    // 1 Aug 1972 – 31 Jul 1973
            "1973-08-01"    => 'M',    // 1 Aug 1973 – 31 Jul 1974
            "1974-08-01"    => 'N',    // 1 Aug 1974 – 31 Jul 1975
            "1975-08-01"    => 'P',    // 1 Aug 1975 – 31 Jul 1976
            "1976-08-01"    => 'R',    // 1 Aug 1976 – 31 Jul 1977
            "1977-08-01"    => 'S',    // 1 Aug 1977 – 31 Jul 1978
            "1978-08-01"    => 'T',    // 1 Aug 1978 – 31 Jul 1979
            "1979-08-01"    => 'V',    // 1 Aug 1979 – 31 Jul 1980
            "1980-08-01"    => 'W',    // 1 Aug 1980 – 31 Jul 1981
            "1981-08-01"    => 'X',    // 1 Aug 1981 – 31 Jul 1982
            "1982-08-01"    => 'Y',    // 1 Aug 1982 – 31 Jul 1983
            "1983-08-01"    => 'A',    // 1 Aug 1983 – 31 Jul 1984
            "1984-08-01"    => 'B',    // 1 Aug 1984 – 31 Jul 1985
            "1985-08-01"    => 'C',    // 1 Aug 1985 – 31 Jul 1986
            "1986-08-01"    => 'D',    // 1 Aug 1986 – 31 Jul 1987
            "1987-08-01"    => 'E',    // 1 Aug 1987 – 31 Jul 1988
            "1988-08-01"    => 'F',    // 1 Aug 1988 – 31 Jul 1989
            "1989-08-01"    => 'G',    // 1 Aug 1989 – 31 Jul 1990
            "1990-08-01"    => 'H',    // 1 Aug 1990 – 31 Jul 1991
            "1991-08-01"    => 'J',    // 1 Aug 1991 – 31 Jul 1992
            "1992-08-01"    => 'K',    // 1 Aug 1992 – 31 Jul 1993
            "1993-08-01"    => 'L',    // 1 Aug 1993 – 31 Jul 1994
            "1994-08-01"    => 'M',    // 1 Aug 1994 – 31 Jul 1995
            "1995-08-01"    => 'N',    // 1 Aug 1995 – 31 Jul 1996
            "1996-08-01"    => 'P',    // 1 Aug 1996 – 31 Jul 1997
            "1997-08-01"    => 'R',    // 1 Aug 1997 – 31 Jul 1998
            "1998-08-01"    => 'S',    // 1 Aug 1998 – 28 Feb 1999
            "1999-03-01"    => 'T',    // 1 Mar 1999 – 31 Aug 1999
            "1999-09-01"    => 'V',    // 1 Sep 1999 – 29 Feb 2000
            "2000-03-01"    => 'W',    // 1 Mar 2000 – 31 Aug 2000
            "2000-09-01"    => 'X',    // 1 Sep 2000 – 28 Feb 2001
            "2001-03-01"    => 'Y',    // 1 Mar 2001 – 31 Aug 2001
        );

        // Loop through the letters until we hit a date that's after
        // our registration date
        foreach( $yearLetters as $key => $letter ) {
            $reg    = $letter." (".$year.")";
            if( $key > $date )
                break;
        }

    /* SEPTEMBER 2001 ONWARDS **************************************
     * For registrations since September 2001 use the current
     * 00 - 99 numbering scheme based on the year.
     **************************************************************/
    } else {

        /* CALCULATE THE REG CODE **********************************
         * New style registration years run from the start of March
         * to the end of February of the next year.
         *
         * The two digit year value represents the March - August
         * identifier (i.e. 09, 10) and 50 is added to the year for
         * the September - February identifier (i.e. 59, 60).
         *
         * To calculate the registration code we must follow the
         * steps below:
         *     - YEAR % 50
         *     - if MONTH < 3 subtract 1
         *     - Add 50 if MONTH > 8 or MONTH < 3
         *
         * Giving us:
         * ( YEAR % 50 ) + ( ( MONTH < 3 ) ? 49 : ( MONTH > 8 ) ? 50 : 0 )
         */
        $reg = ( $year % 50 ) +
        		( ( $month < 3 ) ? 49 : ( ( $month > 8 ) ? 50 : 0 ) );
        $reg = str_pad( $reg, 2, "0", STR_PAD_LEFT )." (".$year.")";

    }

    return $reg;
}

The function above should convert all dates since 1963 to codes. It should also hold true for the future as the current partern is a 50 year repeating one (lest they change it of course).
- Chris

It’s very simple to do. In order to retrieve the page anchor (i.e. get test from http://chris-miller.org/88#test:

var anchor = self.document.location.hash.substring( 1 );

Setting the anchor to update, for example to http://chris-miller.org/88#newAnchor it can be achived using:

self.document.location.hash = "newAnchor";

Very useful for creating permalinks to AJAX loaded content or JS popups.
- Chris

One thing I was struggling a bit to do was fade between two divs, having the first one fade out then the second fade in. Rather than grabbing a plugin to do it I wanted a small bit of JavaScript I could embed in a page, I couldn’t find one anywhere.

It’s pretty simple to do, the code below should give you a starting point to set up some JS to fade between 2 or more divs.

function fadeBetweenDivs( div1, div2 ) {
	$$( div1 ).fade( "out" );
	(function(){
		$$( div1 ).setStyles({
			display:	'none',
			opacity:	0
		});
	}).delay( 150 );
	(function(){
		$( div2 ).setStyles({
			display:	'block',
			opacity:	0
		});
	}).delay( 150 );
	$$( div2 ).fade( "in" );
}

That is all,
- Chris

Figure 1: Ordering Control

Creating a custom control allows us to do a number of things that we just cannot do with a normal HTML form element:

Figures 2, 3 & 4: Showing lower bounds, non-default value and upper bounds

• Display relevant information instead of certain values, such as showing Automatic at 0 in Figure 1
• Show when the upper and lower bounds are reached, for example at -100 and 100 as per our example
• Allow the user to reset the value to the default or previous setting
• Give some inkling into how the control should be used

Controls

Figure 5: Annotated Ordering Field

• Previous/Next: update the value of the field to the previous or next value in the range
• Reset: reset the value to the pre-defined default value
• Display: allow us to display feedback or custom messages based on the value of the field we’re manipulating

This interaction is fairly rudimentary and not very exciting to say the least. We really want to provide more desktop-like interaction via our own custom controls such as the ability to click-and-hold a button in order to scroll through available values. With such a control, in the majority of desktop applications, when the button is held the action that button denotes will be repeated after a short delay usually with increasing speed the longer it’s held. We can emulate this in JavaScript using a timeout to create the pause and a modifier to decrease the length of this pause and in turn increase the speed with which the actions are executed.

Code Snippit 1 contains a brief outline of how to create a mechanism for firing events when a button is held.

<script type="text/javascript">
    var timeout          = 1000;
    var timeout_limit    = 200;
    var timeout_speedup  = 1.5;
    var default          = 0;
    var lower_bounds     = -100;
    var upper_bounds     = 100;

    function setView( str, element ) {
        // Update the ordering element setting the values and
        // icons as necessary
      ...
    }

    function updateVariable() {
        // Update variable
        order        = document.getElementById( "ordering" );
        order_disp   = document.getElementById( "order_disp" );

        // Update variable
        order.value  = order.value + 1;

        // Check Bounds
        if( order.value >= upper_bounds )
            setView( "upper_bounds", order_disp );
        elseif( order.value == default )
            setView( "Default", order_disp );
        else
            setView( "" + order.value, order_disp );

        // Start firing click-and-hold events
        if( timeout > timeout_limit )
            timeout = max( timeout / timeout_speedup, timeout_limit );
        t = setTimeout( updateVariable, timeout );
    }

    function buttonStop( t ) {
        timeout = 1000;
        clearTimeout( t );
    }
</script>

timeout is the time between calling button events, the timeout_speedup modifier is used to recalculate the timeout on each event in order to increase the speed with which the event is fired. We set a lower limit, timeout_limit, to ensure that the events aren’t called too quickly to update the display and to give the user time to react once they near their desired value. A plot of time between ticks against ticks is shown in Graph 1, as you can see it quickly ramps up so timeout is set to the lower limit, much like you would expect from a desktop application’s click-and-hold button interaction.

Graph 1: Timeout vs. Ticks

Code Snippit 2 shows sample HTML used to create the next button with the appropriate onmousedown, onmouseup and onmouseout JavaScript calls to add the desired functionality to the button.

<img
    title="Next" src="images/icons/arrow_right.png" alt="&rarr;"
    
    onmousedown="updateVariable();"
    
    onmouseup="buttonStop( t );"
    
    onmouseout="buttonStop( t );"
/>

We use both onmouseup and onmouseout to ensure that the click-and-hold behavior ceases when the user either releases the mouse button or moves the cursor off the control.

Figure 6: Textentry into ordering field

Feedback

Here’s where our custom controls can really begin to shine, we can give the user direct feedback in the control that they’re manipulating in real-time. Sure we can do this with JavaScript as it stands, but extending beyond the “red border = wrong” methodology we can give visual cues to the user to show that they’re trying to do something thata’s wrong and what specifically is wrong with what they’re doing.

Showing the bounds of the field is easy using the visual cues we’ve detailed in Figures 2 & 4. Other visual cues we can use are that of text/background colouring to show that an error occurred. We can also, using the same timeout methods used for the click-and-hold interaction, display useful messages to the user for a brief time before correcting their mistakes telling them what they did wrong and why their entries have been changed, Figure 7.

Figure 7: Error detection and correction

It’s only an example!

Figure 8: Other possible controls?

What’s the point? There’s so much we can do nowadays in terms of interaction, even on the web. Try to add a little bit of interactive zest to your HTML controls, it makes everyone’s experience that little bit easier and better.

Thanks for reading,
- Chris

function getElementsByClass( className ) {
    var all =
        document.all ? document.all : document.getElementsByTagName( '*' );
    var elements = new Array();
    for( var e = 0; e < all.length; e++ ) {
        if (all[e].className == className) {
            elements[elements.length] = all[e];
        }
    }
    return elements;
}

This function basically checks the string that is entered into the class attribute for each HTML element and returns all elements where there is an exact match.

This method will fail however if we're trying to select elements that have multiple class associations. We need to use something more complex when, for example, creating a list of items that are filterable by class when arranged in overlapping groups. Splitting the class attribute on space characters will allow us to check for matches in these cases:

function getElementsByClass( className ) {
    var all =
        document.all ? document.all : document.getElementsByTagName( '*' );
    var elements = new Array();
    for( var e = 0; e < all.length; e++ ) {
        var classes = all[e].className.split(/\s/g);
        for( var c = 0; c < classes.length; c++ ) {
            if( classes == className ) {
                elements[elements.length] = all[e];
            }
        }
    }
    return elements;
}

The function above does pretty much the same as the first one, however splits the class attribute string on the spaces and loops through them, trying to match the parts individually. This should match on elements with singular and multiple class names associated with them and solve any problems with multiple classed elements.
- Chris ]]> http://chris-miller.org/archives/2008/10/02/get-multi-class-elements-in-javascript/feed/ 0