getElementByClass

You can use javascript to getElementByTag or getElementById, but what about class?

Like most plastic surgeons at this time of year, we are currently doing some development work on one of our client's back-ends! This involves some nipping and tucking of various code including the need to update the currency displayed in various fields should the end-user decide to change it.

If the currency was being displayed in just one field, we could apply an id and use the innerHTML property. However, in this case there are multiple fields that all display the currency.

As such, a span element was applied with the class "currency" and the following javascript function (based on this one) was used:


function currency_switch(currency){
var allHTMLTags=document.getElementsByTagName("span");
for (i=0; i if (allHTMLTags.className=='currency') {
allHTMLTags.innerHTML = currency;
}
}
}

Dynamic mp3 player

For the Elastic Artists website, a dynamic MP3 player was required that could be controlled and loaded from the backend.

I decided to go with a Flash based player and found a great tutorial for creating a flash MP3 player using XML. In order for the player layout to match the design called for by the client, a few tweaks were needed:

Original code:

_root._x = 5;
_root._y = 40 + (i*15);
_root.but_txt.text = songname;
if (i >= 3){
_root._x = 160
_root._y = -5 + (i*15);
}


My code:

_root._x = 0;
_root._y = 55+(i*30);
_root.but_txt.text.html = true;
_root.but_txt.htmlText = "Artist: "+songband+""+newline+"Track: "+songname;

The original produces two columns of 3 tracks side by side and just displays the song name. The amended code produces one list of tracks with font-color black (other font info was applied through flash) in the format:
Artist: artistname
Track: trackname
The amount of tracks returned will always be nine. This is controlled by the backend of the website.

Other than all the various original design elements, the only other change called for was for a playlist generated from a database table. While the tutorial makes use of a user-generated XML file, I used a php file that generates XML:


header("Content-type: text/xml");
$xml_output = '$xml_output .= '';
//connect and run query to return values for track title, artist and link to mp3 file
$title = $row;
$url = $row;
$artistName = $row;
$xml_output .= '';
$xml_output .= '';
echo $xml_output;

The client can then control the contents of the playlist via the site backend.