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