jacquie
Site Admin
Joined: 31 Jan 2007
Posts: 102
Location: Salt Lake City, Utah, USA
|
 Posted: Sun Feb 04, 2007 12:37 am Post subject: Countdown/Advent Calendar Script |
 |
|
This is the code to make an advent calendar like the one I had on my blog in December.
To make it work you need to go through the following steps:
1) Choose 25 pictures - one for the background and 24 for the windows. The pictures need to be loaded into a picture host in the usual way as you will need their URLS.
2) Create a sidebar item for HTML in your blog.
3) Copy this code into the sidebar item.
| Code: |
<script type="text/javascript" language="javascript">
function drawWindow(day,picture)
{
date = new Date;
if ((date.getFullYear()==2007)&&(date.getMonth()==11)&&(date.getDate()>=day))
{
document.write("<a onclick=\"window.open(this.href, '_blank', 'width=800,height=1066,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false\" href=\""+picture+"\">"
+
"<img width=\"45px\" border=\"0\" src=\""+picture+"\" title=\""+day+"\" alt=\""+day+"\" style=\"margin: 0px 0px 0px 0px; float: center;\" /></a>");
}
else
{
document.write('<span style="color:Red">'+day+'</span>');
}
}
</script>
<div align="center">
<table style=" width:320; background:url('***LINK TO BACKGROUND PICTURE***') center no-repeat" border="0"><tbody>
<tr>
<td align="center" style="width:45px; height:60px;">
<script language="javascript" type="text/javascript">drawWindow(1,'***LINK TO PICTURE 1***');</script>
</td>
<td style="width:45px; height:60px;" align="center">
<script language="javascript" type="text/javascript">drawWindow(13,'***LINK TO PICTURE 13***'); </script>
</td>
<td style="width:45px; height:60px;" align="center">
<script language="javascript" type="text/javascript">drawWindow(21,'***LINK TO PICTURE 21***');</script>
</td>
<td style="width:45px; height:60px;" align="center">
<script language="javascript" type="text/javascript">drawWindow(4,'***LINK TO PICTURE 4***');</script>
</td>
</tr>
<tr>
<td style="width:45px; height:60px;" align="center">
<script language="javascript" type="text/javascript">drawWindow(17,'***LINK TO PICTURE 17***');</script>
</td>
<td style="width:45px; height:60px;" align="center">
<script language="javascript" type="text/javascript">drawWindow(9,'***LINK TO PICTURE 9***');</script>
</td>
<td style="width:45px; height:60px;" align="center">
<script language="javascript" type="text/javascript">drawWindow(15,'***LINK TO PICTURE 15***');</script>
</td>
<td style="width:45px; height:60px;" align="center">
<script language="javascript" type="text/javascript">drawWindow(19,'***LINK TO PICTURE 19***');</script>
</td>
</tr>
<tr>
<td align="center" style="width:45px; height:60px;" >
<script language="javascript" type="text/javascript">drawWindow(6,'***LINK TO PICTURE 6***');</script>
</td>
<td style="width:45px; height:60px;" align="center">
<script language="javascript" type="text/javascript">drawWindow(20,'***LINK TO PICTURE 20***');</script>
</td>
<td style="width:45px; height:60px;" align="center">
<script language="javascript" type="text/javascript">drawWindow(11,'***LINK TO PICTURE 11***');</script>
</td>
<td style="width:45px; height:60px;" align="center">
<script language="javascript" type="text/javascript">drawWindow(22,'***LINK TO PICTURE 22***');</script>
</td>
</tr>
<tr>
<td align="center" style="width:45px; height:60px;" >
<script language="javascript" type="text/javascript">drawWindow(2,'***LINK TO PICTURE 2***');</script>
</td>
<td style="width:45px; height:60px;" align="center">
<script language="javascript" type="text/javascript">drawWindow(14,'***LINK TO PICTURE 14***');</script>
</td>
<td style="width:45px; height:60px;" align="center">
<script language="javascript" type="text/javascript">drawWindow(7,'***LINK TO PICTURE 7***');</script>
</td>
<td style="width:45px; height:60px;" align="center">
<script language="javascript" type="text/javascript">drawWindow(16,'***LINK TO PICTURE 16***');</script>
</td>
</tr>
<tr>
<td align="center" style="width:45px; height:60px;" >
<script language="javascript" type="text/javascript">drawWindow(5,'***LINK TO PICTURE 5***');</script>
</td>
<td style="width:45px; height:60px;" align="center">
<script language="javascript" type="text/javascript">drawWindow(18,'***LINK TO PICTURE 18***');</script>
</td>
<td style="width:45px; height:60px;" align="center">
<script language="javascript" type="text/javascript">drawWindow(8,'***LINK TO PICTURE 8***');</script>
</td>
<td style="width:45px; height:60px;" align="center">
<script language="javascript" type="text/javascript">drawWindow(10,'***LINK TO PICTURE 10***');</script>
</td>
</tr>
<tr>
<td align="center" style="width:45px; height:60px;">
<script language="javascript" type="text/javascript">drawWindow(3,'***LINK TO PICTURE 3***');</script>
</td>
<td style="width:45px; height:60px;" align="center">
<script language="javascript" type="text/javascript">drawWindow(12,'***LINK TO PICTURE 12***');</script>
</td>
<td style="width:45px; height:60px;" align="center">
<script language="javascript" type="text/javascript">drawWindow(23,'***LINK TO PICTURE 23***');</script>
</td>
<td style="width:45px; height:60px;" align="center">
<script language="javascript" type="text/javascript">drawWindow(24,'***LINK TO PICTURE 24***');</script>
</td>
</tr>
</tbody></table>
</div> |
4) Replace wherever it says ***LINK TO...*** with one of your picture links, making sure you keep the single quotes.
Notes:
This is set up to work for next December, but you can change the 11 where it says 'date.getMonth()==11' to the month of your choice where Jan = 0, Feb = 1 etc.
The pictures are arranged randomly - the number before each picture link gives the order in which the doors will open, you can change these around too - just make sure you have one for each day.
The pictures are arranged in six rows of four pictures as this fitted in best with the width of my sidebar, but you can place <tr></tr> (table row) tags to change the grid to anything you like. The code for each picture is in a <td></td> (table item) tag and that doesn't need to change.
You can also change the number of pictures by adding or removing picture codes delimited by the <td> tags.
There is no reason why it has to be used only for advent - it could be used as a countdown to a wedding, birth, Easter - anything really. And you could change the frequency of the pictures opening as well.
Ask me if you need help with customising the code in any way!
_________________
Jacquie
Jacquie's Journal
Crafty Threads 'n' Yarns |
|
FAQ
Search
Memberlist
Usergroups
Join! (free) 
Profile
Log in to check your private messages
Log in
