Post by Ross on Oct 25, 2005 23:34:24 GMT
This will add a table wherever you put it, either Header or Footer. This table will then display the number of days until a specified date. Look at the colored sections in the code below to see what does what. For sake of having an example, I've used Christmas.
<style type="text/css">
<!--
.countBox
{
background-image:url(Background Image URL);
width: 500px;
height: 80px;
font-family: Papyrus;
font-size: 18px;
color: FFF33F;
text-align: center;
}
-->
</style>
<script type="text/javascript">
<!--
/*
countdown to event by ross
support.proboards.com
please keep this header intact at all times
*/
// Enter the date to count down to in the form of dd,mm,yyyy
var countTo = [25,12,2005];
// Text to appear before the event takes place. Use #d to represent the number of days
var beforeEvent = '#d days until Christmas';
// Text to appear on the day of the event
var onEvent = 'Merry Christmas!';
// Text to appear after the event has finished
var afterEvent = 'Hope you all had a good Christmas';
// No editing below
var newTable = document.createElement('table');
newTable.align = 'center';
newCell = newTable.insertRow(0).insertCell(0);
newCell.vAlign = 'middle';
newCell.className = 'countBox';
var targetDate = new Date();
targetDate.setDate(countTo[0])
targetDate.setMonth(countTo[1]-1)
targetDate.setYear(countTo[2])
var todayDate = new Date();
var dif = targetDate - todayDate;
var total = Math.floor(dif/86400000)
if(total == 0)
mes = document.createTextNode(onEvent);
else if(total > 0)
mes = document.createTextNode(beforeEvent.replace(/#d/gi,total));
else
mes = document.createTextNode(afterEvent);
newCell.appendChild(mes);
document.getElementsByTagName('body')[0].appendChild(newTable);
//-->
</script>
Any of the stuff in purple may be edited to change the style of the text or give the table a background.
The red is the date to count down to. Ensure you enter it in the correct form (dd,mm,yyyy)
If you wish to use an apostrophe in any of the text areas (Blue), put a backslash before it. eg. it\'s
<style type="text/css">
<!--
.countBox
{
background-image:url(Background Image URL);
width: 500px;
height: 80px;
font-family: Papyrus;
font-size: 18px;
color: FFF33F;
text-align: center;
}
-->
</style>
<script type="text/javascript">
<!--
/*
countdown to event by ross
support.proboards.com
please keep this header intact at all times
*/
// Enter the date to count down to in the form of dd,mm,yyyy
var countTo = [25,12,2005];
// Text to appear before the event takes place. Use #d to represent the number of days
var beforeEvent = '#d days until Christmas';
// Text to appear on the day of the event
var onEvent = 'Merry Christmas!';
// Text to appear after the event has finished
var afterEvent = 'Hope you all had a good Christmas';
// No editing below
var newTable = document.createElement('table');
newTable.align = 'center';
newCell = newTable.insertRow(0).insertCell(0);
newCell.vAlign = 'middle';
newCell.className = 'countBox';
var targetDate = new Date();
targetDate.setDate(countTo[0])
targetDate.setMonth(countTo[1]-1)
targetDate.setYear(countTo[2])
var todayDate = new Date();
var dif = targetDate - todayDate;
var total = Math.floor(dif/86400000)
if(total == 0)
mes = document.createTextNode(onEvent);
else if(total > 0)
mes = document.createTextNode(beforeEvent.replace(/#d/gi,total));
else
mes = document.createTextNode(afterEvent);
newCell.appendChild(mes);
document.getElementsByTagName('body')[0].appendChild(newTable);
//-->
</script>
Any of the stuff in purple may be edited to change the style of the text or give the table a background.
The red is the date to count down to. Ensure you enter it in the correct form (dd,mm,yyyy)
If you wish to use an apostrophe in any of the text areas (Blue), put a backslash before it. eg. it\'s