You are here:
Countdown to Christmas: Free javascript advent calendar for your website
Help your visitors count down to Christmas with this free and easily customised javascript advent calendar for your website. My demonstration here (valid up to door 4 only) contains tiny pictures, but each door could hide videos, songs, games, books, or software.
There are basic controls in this script to stop people opening doors early, but they're switched off here for demonstration purposes. Try it now (doors 1 to 4 only):
Troubleshooting
Each door opens a new window, so you'll need to switch off any pop-up blockers that interfere. You need to have Javascript enabled. Expect error messages for doors higher than 4 - this is just a demo and I haven't created them.
Why Javascript?
There are several reasons why Javascript is a good solution for this problem:- It's as easy to edit as HTML - you can use a basic text editor
- You don't need any special skills to configure this script - if you can design basic webpages, you should be able to install this script using the basic instructions provided
- You don't need any special hosting or servers - this should work anywhere where you can host a webpage
- Your visitors do not need any special plug-ins
Download the code
Download the advent calendar script and demo in a zip file (30KB).
Components of your Javascript advent calendar
These are the components to your advent calendar:
- The background picture. This can be a JPG or a GIF. My image above came from royalty free photo site sxc.hu
- The file calendarcode.html. This is where you configure your calendar.
- A separate file for each door. I've numbered mine 1.htm, 2.htm, 3.htm and 4.htm. It doesn't matter what they're called or where they're stored.
- The file wrapper.html. This contains the iframe code you need to insert the advent calendar into a webpage.
Configuring your calendar script
I've put instructions in the file calendarcode.html and marked them using a row of hashes so they should stand out. You can configure:
- Your background image
- The number of rows and columns of doors that you have (so you could have 2x12 doors or 3x8 instead of the 6x4 I'm using above)
- Where the doors start, measured from on the left
- Where the doors start, measured from the top
- How far apart the doors are, horizontally and vertically
You can also edit the stylesheet to change the appearance of the doors. I've indicated what the different colours mean, but since this is a simple plug-in script I haven't provided extensive instructions for changing the door appearance apart from that. That could amount to a tutorial in itself.
For each door, you will also need to specify:
- The URL of the file that the door opens. In my example, I've just used 1.htm, 2.htm and so on, but you could have a URL on a different server or a different file type.
- The width of the window to be opened
- The height of the window to be opened
By default, the windows open without scrollbars. To turn scrollbars on for a particular door, you need to define the array scrollbarsarray[] for the appropriate door. Look at the demonstration code for door four to see how this works.
Inserting your advent calendar into your webpage
You use an iframe to add the calendar into your webpage. The file wrapper.html shows how to do this. The important thing is that the width and height of the iframe should match the size of your calendar, which will usually be the size of your background image.