Module: Countdown to certain date

[58sniper]

What this does: This adds a module that shows how many days before a certain date. View the demo (http://www.efhs84.com/) in the upper right.

1) Go to Admincp - Styles & Templates - Style Manager - Add a new template called "adv_portal_countdown".
Insert this code into the template:


<table align="center" border="0" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" class="tborder" width="100%">
<tr>
<td class="tcat"><span class="smallfont"><b>$vboptions[blockbullet] Countdown</b></span></td>
</tr>
<tr>
<td class="alt2">
<script type="text/javascript" language="javascript">
var today=new Date()
var theoccasion=new Date(today.getFullYear(), 08, 06)
//Customize text to show before and on occasion. Follow grammer below:
var beforeOccasionText="left until the 20 year reunion"
var onOccasiontext="How come you're reading this and not at the reunion?"
var monthtext=new Array("Jan","Feb","Mar","April","May","June","July","Aug","Sep","Oct","Nov","Dec")
theoccasion.setMonth(theoccasion.getMonth()-1) //change to 0-11 month format
var showdate="("+monthtext[theoccasion.getMonth()]+" "+theoccasion.getDate()+")" //show date of occasion
var one_day=1000*60*60*24
var calculatediff=""

calculatediff=Math.ceil((theoccasion.getTime()-today.getTime())/(one_day))
if (calculatediff<0){ //if bday already passed
var nextyeartoday=new Date()
nextyeartoday.setFullYear(today.getFullYear()+1)
calculatediff=Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff)
}

//Display message accordingly
var pluraldayornot=(calculatediff==1)? "day" : "days"
if (calculatediff>0)
document.write("<span style=\"color: #ff0000; font-weight: bold;\">"+calculatediff+"</span> "+pluraldayornot+" "+beforeOccasionText+"!")
else if (calculatediff==0)
document.write(onOccasiontext+" "+showdate+"!")
</script>
</td>
</tr>
</table>
<br />

Update the line that reads
var theoccasion=new Date(today.getFullYear(), 08, 06)
to suite your desired date, etc.
Save the template!

2) Still in your Admincp - vBa CMPS - Add Module

- Module Title - Countdown
- Module Identifier - Leave blank
- OR Template to Include - countdown
- Activate and select the column you want it in.
- Save and you are done.

[Intex]

58Sniper - thx for that. Will probably use it.

[lee wilde]

Thanks for that - sweet!

[Socket]

Cheers 58sniper :)

[Kengan]

nice mod !! thanks !

[poseidon]

the line we update, not exactly sure how to change it to what I want. Can you explain what changes when you change stuff in that line?

Also, does this count itself down of do you have to change it yourself every day?

[58sniper]

the line we update, not exactly sure how to change it to what I want. Can you explain what changes when you change stuff in that line?

Also, does this count itself down of do you have to change it yourself every day?
It counts down automatically.

The line that reads
var theoccasion=new Date(today.getFullYear(), 08, 06)
is the line you need to worry about. The today.getFullYear(), 08, 06 is the date that you're counting down to. In this case, it's 2004, 08, 06 (or for us US folks, August 6th, 2004). You can change the today.getFullYear() to, say, 2005, and the month and day accordingly.

Does this make sense?

The lines that read
var beforeOccasionText="left until the 20 year reunion"
var onOccasiontext="How come you're reading this and not at the reunion?"

can be edited accordingly to display the correct messages for your date.

[poseidon]

Gotcha, now I got it. I was trying to make it way harder than it was. Nice addition man, thanks :D

[mholtum]

Ok, I been drining the Everclear and juice. Wish me luck I am going in..

[kanyewest69]

i cant see whats in quote i need this modules extremly bad please help

[Frankenberrie]

Likewise... wheres the module?

[oly51]

I use Noppid's vB Countdown hack. Works great. Easy to set up and change.

http://www.vbulletin.org/forum/showthread.php?s=&threadid=75431

Here's a screen cap of Noppids.

[axi]

is it possible to make it read vice versa, ie; 5th MARCH 2005, instead of March 5th etc.

[KW802]

Axi,

Are you taking about this module or Noppid's hack on VB.org? :confused:

[axi]

this module :-)

[Mike54]

I installed this earlier today and really like how easy it was to set up. I did notice just one very small thing about it (after staring at it a dozen times...) and it was an easy fix. Here was your orginal code -

<td class="tcat"><span class="smallfont"><b>$vboptions[blockbullet] Countdown</b></span></td>

After comparing that line to some other mods, I made a couple of slight additions to that -

<td class="tcat"><span class="smallfont"><b>$vba_options[portal_blockbullet] Countdown</b></span></td>

And that got the bullets inserted, to match the other modules.

Nice module and simple enough for a newb like myself to get working.

[ConqSoft]

Here's alternate code, for a realtime countdown, that I use on my site.

You can see it on www.fireblades.org on the right.

(Attaching it, so that the code doesn't break.)

[trulylowcarb]

thanks for this, great idea!

[BioVader]

Can't seem to get the Java one to work right..

[mholtum]

they work great!

[mholtum]

Here's alternate code, for a realtime countdown, that I use on my site. Change the part of the code in red to set the date of your event.

You can see it on www.fireblades.org on the right.



<table align="center" border="0" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" class="tborder" width="100%">
<tr>
<td class="tcat"><span class="smallfont"><b>$vba_options[portal_blockbullet] Countdown!</b></span></td>
</tr>
<tr>
<td class="alt2">
<script language="JavaScript">
function countdown() {
d=new Date();
count=Math.floor((eventdate.getTime()-d.getTime())/1000);
if(count<=0)
{
document.all.days.innerHTML="-";
document.all.hours.innerHTML="-";
document.all.mins.innerHTML="-";
document.all.secs.innerHTML="-";
return;
}
document.getElementById('secs').innerHTML=count%60;
count=Math.floor(count/60);
document.getElementById('mins').innerHTML=count%60;
count=Math.floor(count/60);
document.getElementById('hours').innerHTML=count%24;
count=Math.floor(count/24);
document.getElementById('days').innerHTML=count%365;
count=Math.floor(count/365);


setTimeout("countdown()",500);
}
</script>

<script language="JavaScript">
var eventdate = new Date("June 27, 2005 07:00:00");
</script>

<!--

Put your text / html here.

-->

<table border="0" cellspacing="0" cellpadding="0" width="100%" align="center">
<tr>
<td align="center"><strong>Days</strong></td>
<td align="center"><strong>Hrs</strong></td>
<td align="center"><strong>Mins</strong></td>
<td align="center"><strong>Secs</strong></td>
</tr>
<tr>
<td align="center"><strong><font color="red"><div id="days"></div></font></strong></td>
<td align="center"><strong><font color="red"><div id="hours"></div></font></strong></td>
<td align="center"><strong><font color="red"><div id="mins"></div></font></strong></td>
<td align="center"><strong><font color="red"><div id="secs"></div></font></strong></td>
</tr>
</table>
<script language="JavaScript">
countdown()
</script>

<!--

More text / html here if you want.

--->
</td>
</tr>
</table>
<br />



I added yours to a friends site and I doesnt count down. What did I miss?

[ConqSoft]

I added yours to a friends site and I doesnt count down. What did I miss?


Dunno.. Just so you have all that code in there, it should work. Sure you didn't accidentally remove something while modifying it? Post the link, and I can look at the code on the page.

[mholtum]

<table align="center" border="0" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" class="tborder" width="100%">
<tr>
<td class="tcat"><span class="smallfont"><b>$vba_options[portal_blockbullet] Countdown!</b></span></td>
</tr>
<tr>
<td class="alt2">
<script language="JavaScript">
function countdown() {
d=new Date();
count=Math.floor((eventdate.getTime()-d.getTime())/1000);
if(count<=0)
{
document.all.days.innerHTML="-";
document.all.hours.innerHTML="-";
document.all.mins.innerHTML="-";
document.all.secs.innerHTML="-";
return;
}
document.getElementById('secs').innerHTML=count%60 ;
count=Math.floor(count/60);
document.getElementById('mins').innerHTML=count%60 ;
count=Math.floor(count/60);
document.getElementById('hours').innerHTML=count%2 4;
count=Math.floor(count/24);
document.getElementById('days').innerHTML=count%36 5;
count=Math.floor(count/365);


setTimeout("countdown()",500);
}
</script>

<script language="JavaScript">
var eventdate = new Date("June 27, 2005 07:00:00");
</script>

<!--
Put your text / html here.
--><center><font size="2"> Free Gear Give Away!</font>
</center>

<table border="0" cellspacing="0" cellpadding="0" width="100%" align="center">
<tr>
<td align="center"><strong>Days</strong></td>
<td align="center"><strong>Hrs</strong></td>
<td align="center"><strong>Mins</strong></td>
<td align="center"><strong>Secs</strong></td>
</tr>
<tr>
<td align="center"><strong><font color="red"><div id="days"></div></font></strong></td>
<td align="center"><strong><font color="red"><div id="hours"></div></font></strong></td>
<td align="center"><strong><font color="red"><div id="mins"></div></font></strong></td>
<td align="center"><strong><font color="red"><div id="secs"></div></font></strong></td>
</tr>
</table>
<script language="JavaScript">
countdown()
</script>

<!--
More text / html here if you want.
---><center><font size="2">
Be Sure to register</font>
</center>

</td>
</tr>
</table>
<br />


http://www.theflyfishingforum.com
I think the issue is I cant seem to figure out where to put what I am counting down to?

[ConqSoft]

You put the date/time where I have the code marked red in my original post.

[ConqSoft]

It might have something to do with using both methods of countdown on the same page. They could be interfering with each other....

[mholtum]

I copied your exact code as a test.


<script language="JavaScript">
var eventdate = new Date("June 27, 2005 07:00:00");
</script>


Is it the right format?

Disabled the other one to see still no work.

[mholtum]

anyone? hmmm

[ConqSoft]

No idea... That exact code works on mine, as you can see. :)

[mholtum]

odd. I just copied your template.. hmm

[mholtum]

Here's alternate code, for a realtime countdown, that I use on my site. Change the part of the code in red to set the date of your event.

You can see it on www.fireblades.org on the right.



<table align="center" border="0" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" class="tborder" width="100%">
<tr>
<td class="tcat"><span class="smallfont"><b>$vba_options[portal_blockbullet] Countdown!</b></span></td>
</tr>
<tr>
<td class="alt2">
<script language="JavaScript">
function countdown() {
d=new Date();
count=Math.floor((eventdate.getTime()-d.getTime())/1000);
if(count<=0)
{
document.all.days.innerHTML="-";
document.all.hours.innerHTML="-";
document.all.mins.innerHTML="-";
document.all.secs.innerHTML="-";
return;
}
document.getElementById('secs').innerHTML=count%60;
count=Math.floor(count/60);
document.getElementById('mins').innerHTML=count%60;
count=Math.floor(count/60);
document.getElementById('hours').innerHTML=count%24;
count=Math.floor(count/24);
document.getElementById('days').innerHTML=count%365;
count=Math.floor(count/365);


setTimeout("countdown()",500);
}
</script>

<script language="JavaScript">
var eventdate = new Date("June 27, 2005 07:00:00");
</script>

<!--

Put your text / html here.

-->

<table border="0" cellspacing="0" cellpadding="0" width="100%" align="center">
<tr>
<td align="center"><strong>Days</strong></td>
<td align="center"><strong>Hrs</strong></td>
<td align="center"><strong>Mins</strong></td>
<td align="center"><strong>Secs</strong></td>
</tr>
<tr>
<td align="center"><strong><font color="red"><div id="days"></div></font></strong></td>
<td align="center"><strong><font color="red"><div id="hours"></div></font></strong></td>
<td align="center"><strong><font color="red"><div id="mins"></div></font></strong></td>
<td align="center"><strong><font color="red"><div id="secs"></div></font></strong></td>
</tr>
</table>
<script language="JavaScript">
countdown()
</script>

<!--

More text / html here if you want.

--->
</td>
</tr>
</table>
<br />

This is driving me nuts! I copied your exact code, and this is what I get (see attatchment).

I can't for the life of me figure out what could be the issue.

[ConqSoft]

(Don't keep quoting the code, it makes the thread un-necessarily long. :D )

I don't know what it could be, unless there's some other JS on that site that is conflicting or something. Does it work on your site?

[mholtum]

No, I added it to my site to see if there was an issue. Same thing. It works perfectly but is lacking the actuall countdown numbers. There is no other js running on the site. Clean install of vb 3.0.7 & vbadvanced CMPS 1.0.1

[ConqSoft]

I just re-did the code as an attachment in my original post. Try that.

[mholtum]

well I got it to work thanks

[FD929]

I just re-did the code as an attachment in my original post. Try that.
Awesome. Thanks Conq! (firedawgon929)

P.S. The original template code didn't work for me. Conq's did. (:freebird: if it was on the site)

[MotoUp]

I am using this, and it works great, but it seems to be a day off on the countdown. I have a countdown to Halloween on my portal...does it just not take 31 days in a month into account? Or does it have anything to do with leap year, etc?

[MotoUp]

Is everyone elses showing the correct days left?