Post by Mithras on Aug 22, 2007 9:22:14 GMT -8
Pretty simple, this code adds a calendar wherever you put the code. The numbers up to (and including) the current day are links, and can be "opened." Cookies remember which "doors" have been opened.
Editing: Blue is the height of the cells, green are the URLs to the images.
Editing: Blue is the height of the cells, green are the URLs to the images.
<style type="text/css">
tr.calRow {
height: 60px;
}
</style>
<script type="text/javascript">
<!--
// 2007 Advent Calendar by Mithras
// Edit this first section.
var images = [
['URL to Image'], // 1
['URL to Image'], // 2
['URL to Image'], // 3
['URL to Image'], // 4
['URL to Image'], // 5
['URL to Image'], // 6
['URL to Image'], // 7
['URL to Image'], // 8
['URL to Image'], // 9
['URL to Image'], // 10
['URL to Image'], // 11
['URL to Image'], // 12
['URL to Image'], // 13
['URL to Image'], // 14
['URL to Image'], // 15
['URL to Image'], // 16
['URL to Image'], // 17
['URL to Image'], // 18
['URL to Image'], // 19
['URL to Image'], // 20
['URL to Image'], // 21
['URL to Image'], // 22
['URL to Image'], // 23
['URL to Image'], // 24
['URL to Image'], // 25
];
-->
</script>
<table id="calendar" class="bordercolor" cellspacing="1" cellpadding="4" border="1" align="center">
<tr><td width="100%" colspan="7" class="titlebg"><font size="3"><div style="float:left">Advent Calendar</div><div style="float:right">December 2007</div></font></td></tr>
<tr class="calRow">
<td class="windowbg" width="100" colspan="6"></td>
<td class="windowbg" width="100" id="cell1">1</td>
</tr><tr class="calRow">
<td class="windowbg2" width="100" id="cell2">2</td>
<td class="windowbg" width="100" id="cell3">3</td>
<td class="windowbg2" width="100" id="cell4">4</td>
<td class="windowbg" width="100" id="cell5">5</td>
<td class="windowbg2" width="100" id="cell6">6</td>
<td class="windowbg" width="100" id="cell7">7</td>
<td class="windowbg2" width="100" id="cell8">8</td>
</tr><tr class="calRow">
<td class="windowbg" width="100" id="cell9">9</td>
<td class="windowbg2" width="100" id="cell10">10</td>
<td class="windowbg" width="100" id="cell11">11</td>
<td class="windowbg2" width="100" id="cell12">12</td>
<td class="windowbg" width="100" id="cell13">13</td>
<td class="windowbg2" width="100" id="cell14">14</td>
<td class="windowbg" width="100" id="cell15">15</td>
</tr><tr class="calRow">
<td class="windowbg2" width="100" id="cell16">16</td>
<td class="windowbg" width="100" id="cell17">17</td>
<td class="windowbg2" width="100" id="cell18">18</td>
<td class="windowbg" width="100" id="cell19">19</td>
<td class="windowbg2" width="100" id="cell20">20</td>
<td class="windowbg" width="100" id="cell21">21</td>
<td class="windowbg2" width="100" id="cell22">22</td>
</tr><tr class="calRow">
<td class="windowbg" width="100" id="cell23">23</td>
<td class="windowbg2" width="100" id="cell24">24</td>
<td class="windowbg" width="100" id="cell25">25</td>
<td class="windowbg" width="100" colspan="4"></td>
</tr>
</table>
<script type="text/javascript">
<!--
// Cookie functions by Chris of Studio Zero (studiozero.proboards44.com)
function setCookie(_name,_value){
document.cookie = _name+"="+escape(_value)+";expires="+(new Date()).toGMTString().replace(/\d{4}/,"2050");
}
function getCookie(_name){
if(document.cookie.match(new RegExp(_name+"=(.+?)($|","gi")))
return unescape(RegExp.$1);
return null;
}
function processCell(num) {
var cell = document.getElementById('cell' + num);
cell.innerHTML = '<a href="javascript:void(0)" onclick="showImage(' + num + ',\'0\')">' + cell.innerHTML + '</a>';
}
function showImage(day,type) {
var cell = document.getElementById('cell' + day);
cell.innerHTML = '<img src="' + images[day-1] + '" />';
var name = '07dayClicked' + day;
if(type == '0') {
setCookie(name,'yes');
}
}
var date = new Date();
var alreadyShown = new Array();
var someDate = new Date();
for(b=0; b<25; b++) {
alreadyShown = 0;
}
for(a=1; a<=date.getDate(); a++) {
var cname = '07dayClicked' + a;
if(getCookie(cname) == 'yes') {
showImage(a,'1');
alreadyShown = 1;
}
else if(date.getMonth() == 11) {
var day = date.getDate();
for(i=1; i<=25; i++) {
if(i <= day && alreadyShown == 0)
processCell(i);
}
}
}
//-->
</script>