It's Sean!

UK freelance journalist, author
and copywriter Sean McManus

Printed from www.sean.co.uk. © Sean McManus.
Home > Articles > Webmaster resources > Javascript examples > Javascript Christmas advent calendar

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:

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:

  1. The background picture. This can be a JPG or a GIF. My image above came from royalty free photo site sxc.hu
  2. The file calendarcode.html. This is where you configure your calendar.
  3. 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.
  4. 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:

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:

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.

Switching on the date protection

By default, the date controls are switched off. To stop people opening doors too early, you need to remove the // where indicated in the calendarcode.html file.

Licence

You're welcome to use this script on your website for free, but are kindly requested to link back to this site and leave the credits in the code intact. Suggested links are provided in readme.txt. Please do not redistribute this script on other sites or in script collections.

Related pages