It's Sean!

UK freelance journalist, author
and writer Sean McManus

Printed from © 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):


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
  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.


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

Books by Sean McManus

Scratch Programming in Easy Steps

Scratch Programming in Easy Steps

Raspberry Pi For Dummies

Raspberry Pi For Dummies

Learn to program with the Scratch programming language, widely used in schools and colleges.

Set up your Pi, master Linux, learn Scratch and Python, and create your own electronics projects.

Coder Academy

Coder Academy

Cool Scratch Projects in Easy Steps

Cool Scratch Projects in Easy Steps

Learn to make games and other programs in Scratch 2.0, and make a web page in HTML, with this highly interactive book for 7-10 year olds.

Discover how to make 3D games, create mazes, build a drum machine, make a game with cartoon animals and more!

More books

Recommended articles

Stylised coloured photo of a synth

Discover my music and home recording articles

Interested in starting home recording? Follow me as I start recording, using instruments such as the Novation MiniNova and Korg Kaossilator, and share my synth and sample-based music online.

Scratch cat and rainbow circle

10-block demos for Scratch programming

Lots of people of all ages are learning to program with Scratch. Discover some useful tricks and techniques in my 10-block Scratch demos, including special effects you can drop into your games.

Paper Raspberry Pi case

Download free book chapters and more!

Download a free case for your Raspberry Pi, and free chapters from my books about the Raspberry Pi, Scratch, web design and more!

©Sean McManus.