The Advent calendar, as we know it, has existed since the 19th century, and has been used by generations of children; however children in the 21st century are as (if not more) likely to be looking for a cyber Advent calendar as they are a cardboard one. However, that's not a problem because a web site developer can easily add an Advent calendar on to a web page - by using Javascript.
However, before starting programming it's worth considering exactly what the Advent calendar will do:
- 24 pictures will be displayed on the page, but by default these will be covered by a numbered door
- any picture for previous days will be uncovered
- the user will not be able to view the pictures for days in the future
- the picture for the current day will be hidden behind one of the numbered doors, but the user should be able to see the picture by placing their mouse over the correct door
- the Advent calendar will only work during December
Creating Pictures for the Advent Calendar
The pictures for the Advent Calendar are traditionally in a Christmas theme, for example:
- Nativity scenes
- Christmas trees
- angels
- Christmas presents
Obviously these pictures can be as detailed as required, but for simple pictures icon editors such as KIconEdit will do the job nicely (for more information on creating and using icons have a read of How to Use Javascript to Animate Snowflakes).
Placing the Pictures on a Web Page
Every web site designer will have played images on a web page, and there are a few ways to to this:
- use a simple HTML table to lay out the images
- modify the image's style and set its position, top and left properties
In this case the style option is the most useful because both the 'door' and the picture that it hides must occupy the same space. With that in mind it's time to start thinking about the Javascript code.
Javascript Code for an Advent Calendar Web Page
In this example a multidimensional array is used to store the coordinates of each Advent calendar item - the coordinates will be a pair of values representing the image's top and left properties.
The Javascript will also need to provide functions that will:
- calculate what the current date is
- open the appropriate door when the mouse is placed over it
- close the appropriate door when the mouse is moved away from it
A Javascript Multidimensional Array for Storing Coordinates
The coordinate array is simple an array with 24 elements (the number of days) each element of which is another array with 2 more elements ( the top and the left of the image to be displayed):
Obviously, coordinates for days 3 to 22 will be required as well
A Javascript Function to Calculate the Current Day
The function for calculating the current must take the following into account:
- only days in December are valid
- the Javascript date object counts January as 0 and December as 11
Javascript Function to Open and Close Advent Calendar Door
The functions for opening and closing the doors use the current_dayfunction to decide which door may be opened and then hide or reveal the appropriate images:
Laying out an Advent Calendar with Javascript
A simple Javascript loop can now be used to place each of the images in its correct location:
Opening Advent Calendar Doors from Earlier Days
And finally any door from previous days in the month can be opened automatically - again by using a simple loop:
Conclusion
The Javascript code required to create an Advent calendar for a web page is very simple - but the end result is very effective; and simple changes (such as changing the images or the image coordinates) mean that the same basic code can be repeated to give different Advent calendars on different web pages.
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 ...
