"The Twelve Days of Christmas" is a very popular Christmas carol and is a welcome addition to any web site - especially if it is animated using Javascript.
"The Twelve Days of Christmas" is popular throughout Europe and America; the words to the rhyme were first published in 1780 but the tune has been around since at least the 16th century. Now, of course, it can be brought into the 21st century by placing it on a web site and using Javascript to animate this well known Christmas carol.
The lyrics for the "The Twelve Days of Christmas" could, of course, be displayed as static text on a web page; however, it's easy to make the web page more interesting by using Javascript to:
- hide all of the lines of the song, with only the numbers for the days (1-12) displayed
- display the appropriate lines when the mouse pointer is passed over one of the day numbers
Laying Out the Web Page
Standard HTML can be used to lay out the web page, and this will be used to:
- create a table containing the day numbers - this will also contain the triggers for the Javascript code that will reveal the lines of the carol
- add the lines of the song to the web page (although these will be hidden by the Javascript code)
The HTML itself will be something like:
<body>
<table width=100% cellpadding=0 cellspacing=0>
<tr>
<td id=box_1 width=8.33% align=center
onmouseover="show_days(1)" onmouseout="hide_days()">1</td>
<td id=box_2 width=8.33% align=center
onmouseover="show_days(2)" onmouseout="hide_days()">2</td>
<td id=box_3 width=8.33% align=center
onmouseover="show_days(3)" onmouseout="hide_days()">3</td>
<td id=box_4 width=8.33% align=center
onmouseover="show_days(4)" onmouseout="hide_days()">4</td>
<td id=box_5 width=8.33% align=center
onmouseover="show_days(5)" onmouseout="hide_days()">5</td>
<td id=box_6 width=8.33% align=center
onmouseover="show_days(6)" onmouseout="hide_days()">6</td>
<td id=box_7 width=8.33% align=center
onmouseover="show_days(7)" onmouseout="hide_days()">7</td>
<td id=box_8 width=8.33% align=center
onmouseover="show_days(8)" onmouseout="hide_days()">8</td>
<td id=box_9 width=8.33% align=center
onmouseover="show_days(9)" onmouseout="hide_days()">9</td>
<td id=box_10 width=8.33% align=center
onmouseover="show_days(10)" onmouseout="hide_days()">10</td>
<td id=box_11 width=8.33% align=center
onmouseover="show_days(11)" onmouseout="hide_days()">11</td>
<td id=box_12 width=8.33% align=center
onmouseover="show_days(12)" onmouseout="hide_days()">12</td>
</tr>
</table>
<center>
<div id=first_line>
On the <span id=day_name></span> day of Christmas,<br />
my true love sent to me</div>
<div id=day_12>Twelve drummers drumming,</div>
<div id=day_11>Eleven pipers piping,</div>
<div id=day_10>Ten lords a-leaping,</div>
<div id=day_9>Nine ladies dancing,</div>
<div id=day_8>Eight maids a-milking,</div>
<div id=day_7>Seven swans a-swimming,</div>
<div id=day_6>Six geese a-laying,</div>
<div id=day_5>Five golden rings,</div>
<div id=day_4>Four calling birds,</div>
<div id=day_3>Three French hens,</div>
<div id=day_2>Two turtle doves,</div>
<div id=day_1><span id=and></span>a partridge in a pear tree!
<img src=partridge.png></div>
</center>
</body>
The Javascript Code for the "The Twelve Days of Christmas"
The Javascript code will need to:
- hide and reveal the appropriate lines of the song
- display the correct day for the first line
- decide if "and" should be displayed on the last line
Two functions are all that are needed.
The Function for Revealing Lines of the Song
The function will require an array of the days to be displayed in the first line of the song:
<script>
var day_names = new Array (
"blank","first","second","third","forth","fifth","sixth",
"seventh","eighth","ninth","tenth","eleventh","twelfth");
Using the data from the array the function update the first line and then makes it visible:
function show_days(day) {
var day_name = document.getElementById("day_name");
day_name.innerHTML = day_names[day];
document.getElementById("first_line").style.visibility = "";
The function also highlights the day number under the mouse:
var box = document.getElementById("box_" + day);
box.style.backgroundColor = "yellow";
And then it puts the word "and" in the last line if it's required:
if (day == 1) {
document.getElementById("and").innerHTML = "";
} else {
document.getElementById("and").innerHTML = "and ";
}
Finally the code will show all or the lines for the selected day:
for (var i=1;i<=day;i++) {
var day_line = document.getElementById("day_" + i);
day_line.style.height = "auto";
day_line.style.visibility = "";
}
}
The Function for Hiding Lines of the Song
The function simple hides the first line's of the song and a loop hides the line for each day of the song:
function hide_days() {
document.getElementById("first_line").style.visibility = "hidden";
for (var i=1;i<=12;i++) {
var box = document.getElementById("box_" + i);
box.style.backgroundColor = "transparent";
var day_line = document.getElementById("day_" + i);
day_line.style.visibility = "hidden";
day_line.style.height = "0px";
}
}
And as soon as the page has been loaded the Javascript hides all of the lines of the carol automatically:
Conclusion
Just by adding two simple Javascript functions the web page developer can turn a simple, static web page into a much more interesting activity for the user.
Mark Alexander Bain
- Mark Alexander Bain is a writer, Mo Bro and consultant for all aspects of software development at dsquared. He has also written regularly
...
