|
Post by Wormopolis on Dec 26, 2008 0:38:47 GMT -8
Browser Tested: IE and FF Placement: Main Footer Uses existing Proboards calendar and puts pictures that are clickable as someone reaches that day of the month (in other words you cant reveal the hidden picture until that day is reached). Editable "reveal" picture and array of "hidden" pictures. uses cookie to store which pictures you already opened. <script type="text/javascript"> <!-- /* ADVENT CALENDAR - by Wormopolis Do not repost - keep header intact [url]wormocodes.proboards.com[/url] v 1.3 */
//edit year and month for calander, (jan=1 ... dec=12) var chosenMonth = 12;
var hideImage='http://farm1.static.flickr.com/40/96170149_378dc8638e.jpg'; //image before reveal
var images = [ ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/cookie.jpg'], // 1 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/mantle1.jpg'], // 2 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/trees1.jpg'], // 3 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/orna1.jpg'], // 4 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/presents1.jpg'], // 5 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/tower.jpg'], // 6 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/glass.jpg'], // 7 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/tree4.jpg'], // 8 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/santadogs.jpg'], // 9 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/tree2.jpg'], // 10 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/flowers.jpg'], // 11 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/snowman.jpg'], // 12 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/river.jpg'], // 13 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/orna5.jpg'], // 14 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/mantle2.jpg'], // 15 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/orna2.jpg'], // 16 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/orna3.jpg'], // 17 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/orna6.jpg'], // 18 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/egg.jpg'], // 19 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/groupshot.jpg'], // 20 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/mantle3.jpg'], // 21 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/orna7.jpg'], // 22 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/cookie2.jpg'], // 23 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/creepycat.jpg'], // 24 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/santa1.jpg'], // 25 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/house1.jpg'], // 26 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/orna9.jpg'], // 27 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/house2.jpg'], // 28 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/orna8.jpg'], // 29 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/tree3.jpg'], // 30 ['http://i197.photobucket.com/albums/aa250/WORMOPOLIS/xmas/new-years.jpg'] // 31 ];
// DONT EDIT BELOW HERE
function XBrowserAddHandler(target,eventName,handlerName) { if ( target.addEventListener ) { target.addEventListener(eventName, function(e){target[handlerName](e);}, false); } else if ( target.attachEvent ) { target.attachEvent("on" + eventName, function(e){target[handlerName](e);}); } }
if (location.href.match(/ion=calendar/)) { nwDate=new Date(); curMonth=nwDate.getMonth()+1;
// check URL.. no "month" assume current month if (location.href.match(/month=(\d+)/)) { var calMonth=RegExp.$1; } else { calMonth=curMonth; } lft=screen.width / 2; document.write('<div id="adventBigger" style="display:none; position:absolute; left:100; top:100" onclick="this.style.display=\'none\'"><img src="'+hideImage+'" border="0"></div>');
if (chosenMonth==calMonth || (document.cookie.match('adv'+calMonth))) { tds=document.getElementsByTagName('td'); var place=0; for (i=0; i<tds.length; i++) { if ((tds[i].className=="windowbg2" || tds[i].className=="windowbg") && tds[i].vAlign=="top" && (tds[i].width=="14%" || tds[i].width=="15%") && tds[i].firstChild && tds[i].firstChild.nodeName.match(/table/i)) {
rgxp = new RegExp("adv"+calMonth+"=(\\d+)"); if (document.cookie.match(rgxp)){ bef=RegExp.$1; } else { bef="0000000000000000000000000000000"; }
dv=tds[i].getElementsByTagName('div')[0]; ig=document.createElement('img'); newpic=images[place++]; with (ig) { if (bef.charAt(place-1)!="1") { src=hideImage; } else { src=newpic; } width=100; height=80; border=0; style.borderColor=tds[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.bgColor; }
function swapPic(e) { if (this.src==this.storesrc) { document.getElementById('adventBigger').firstChild.src=this.storesrc; document.getElementById('adventBigger').style.display=''; vw=parseInt(document.getElementById('adventBigger').firstChild.width); vh=parseInt(document.getElementById('adventBigger').firstChild.height); document.getElementById('adventBigger').style.top=document.body.scrollTop+(screen.availHeight/3)-(vh/2); document.getElementById('adventBigger').style.left=(screen.availWidth/2 - vw/2);
} this.src=this.storesrc; //000 0000 0000 0000 0000 0000 0000 0000 rgxp = new RegExp("adv"+calMonth+"=(\\d+)"); if (document.cookie.match(rgxp)){ bef=RegExp.$1; } else { bef="0000000000000000000000000000000"; } bef=bef.substring(0,this.keepnum-1)+"1"+bef.substring(this.keepnum,bef.length) tmpDate=new Date(); if (tmpDate.getMonth()<10) { tmpDate.setMonth(tmpDate.getMonth()+3); } else { tmpDate.setMonth(tmpDate.getMonth()-9); tmpDate.setYear(tmpDate.getFullYear()+1); } document.cookie="adv"+calMonth +"="+bef+"; expires="+tmpDate; }
calDay=(dv.firstChild.firstChild.nodeName.match(/a/i) ? dv.firstChild.firstChild.innerHTML : dv.firstChild.innerHTML);
ig.storesrc=newpic; ig.cHandler=swapPic; ig.keepnum=place;
if ((curMonth==chosenMonth) && (calDay<=nwDate.getDate() || calDay=="TODAY")) { ig.border=2; XBrowserAddHandler(ig,"click","cHandler");
} dv.parentNode.insertBefore(ig, dv.nextSibling); } } }
}
// --> </script>
preview:
|
|
ÇÝßØRG
Code Helper
Posts: 32
ÇÝßØRG said 0 great things
|
Post by ÇÝßØRG on Dec 26, 2008 3:01:31 GMT -8
Is it possible so that whenever there is a birthday, it automatically turns into a certain image e.g. a cake? So we dont need to input images for birthdays
|
|
|
Post by Wormopolis on Dec 26, 2008 3:06:39 GMT -8
on the calendar or the main page?
An advent calendar is an old idea that has a bunch of little doors on a calendar. each day of December you open the door and read the scripture behind it. then there is a little piece of chocolate inside.
|
|
ÇÝßØRG
Code Helper
Posts: 32
ÇÝßØRG said 0 great things
|
Post by ÇÝßØRG on Dec 26, 2008 12:39:14 GMT -8
Oh I see...nvm then
|
|
|
Post by Wormopolis on Dec 26, 2008 12:58:58 GMT -8
Your idea could be put into the request board however....
|
|
silent
Not New Member
Posts: 5
silent said 0 great things
|
Post by silent on Dec 26, 2008 22:06:48 GMT -8
this code is good,but is it only for the month of december?
|
|
Mr. Moon
Code Helper
Posts: 16
Mr. Moon said 0 great things
|
Post by Mr. Moon on Dec 26, 2008 22:14:25 GMT -8
No, you edit the month 1-12 and change the images every month.
Just from looking at the top part of the code really quick. I could be wrong.
|
|
silent
Not New Member
Posts: 5
silent said 0 great things
|
Post by silent on Dec 26, 2008 23:37:18 GMT -8
oh i see,must be a drag adding different images each month tho.
|
|
|
Post by Wormopolis on Dec 27, 2008 2:35:27 GMT -8
Well typically ppl use it for December, but I wrote it so it could be used for any month. You would need a second copy of the code if you wanted more than 1 month to have images concurrently (like you wanted December's pictures to remain for anyone who missed them and then make March have pics as well).
I found all the example pics in the code in about 10 minutes. the code will resize them down to fit in the calendar cells.
|
|
|
Post by Wormopolis on Nov 9, 2009 5:34:41 GMT -8
version 1.2: bug fix regarding month display
|
|
|
Post by Wormopolis on Dec 1, 2009 0:46:09 GMT -8
1.21: bug fix for days without links
|
|
|
Post by Wormopolis on Dec 2, 2009 16:41:16 GMT -8
version 1.3: clicking the hidden picture will now open a full size DIV so you can see the picture better. clicking the DIV will hide it.
|
|