Multiple Countdown Block

akulion · December 17, 2006, 03:23:11 AM

Multi Countdown Script.

This is a script from Dynamic Drive adapted and changed around to show multiple countdowns to multiple events.

The demo of it can be seen here on my live site (just browse down u cant miss it)

This is intended for a center block but can be used in a side block too with some changes (details later)

To install put this code in a SCRIPT block via your blocks manager and enjoy!

Code Select


<head>
<script type="text/javascript">

/***********************************************
* Dynamic Countdown script- © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}

cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}

cdtime.prototype.showresults=function(){
var thisobj=this


var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}

/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////

//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access "Days" left
//Use arguments[1] to access "Hours" left
//Use arguments[2] to access "Minutes" left
//Use arguments[3] to access "Seconds" left

//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()
//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc

function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds left until <b>Hajj Begins</b>"
}
else{ //else if target date/time met
var displaystring="<b>Hajj</b> has begun!"
}
return displaystring
}

function formatresults1(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds left until <b>Arafa day</b>"
}
else{ //else if target date/time met
var displaystring="<b>Arafa day</b> is here!"
}
return displaystring
}

function formatresults2(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds left until <b>Eidu al-adha</b>"
}
else{ //else if target date/time met
var displaystring="<b>Eidu al-adha</b> is here!"
}
return displaystring
}

function formatresults3(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds left until <b>1st Ramadhan</b>"
}
else{ //else if target date/time met
var displaystring="<b>1st Ramadhan</b> is here!"
}
return displaystring
}

function formatresults4(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds left until <b>Eidu al-fitr</b>"
}
else{ //else if target date/time met
var displaystring="<b>Eidu al-fitr</b> is here!"
}
return displaystring
}
</script>
</head>


<table border="0" width="100%" id="table1" cellpadding="0" style="border-collapse: collapse">
	<tr>
		<td width="360">
		<img border="0" src="imdatesmain1.jpg" width="360" height="165"></td>
		<td background="impdates_strip.gif"><font size="1" color="#FFFFFF" face="Verdana">
<div id="countdowncontainer"></div>
<hr />
<div id="countdowncontainer1"></div>
<hr />
<div id="countdowncontainer2"></div>
<hr />
<div id="countdowncontainer3"></div>
<hr />
<div id="countdowncontainer4"></div>
</font></td>
	</tr>
</table>


<script type="text/javascript">
var futuredate=new cdtime("countdowncontainer", "December 30, 2006 23:59:00")
futuredate.displaycountdown("days", formatresults)
var futuredate=new cdtime("countdowncontainer1", "December 31, 2006 23:59:00")
futuredate.displaycountdown("days", formatresults1)
var futuredate=new cdtime("countdowncontainer2", "January 1, 2007 23:59:00")
futuredate.displaycountdown("days", formatresults2)
var futuredate=new cdtime("countdowncontainer3", "September 13, 2007 23:59:00")
futuredate.displaycountdown("days", formatresults3)
var futuredate=new cdtime("countdowncontainer4", "October 13, 2007 23:59:00")
futuredate.displaycountdown("days", formatresults4)

var currentyear=new Date().getFullYear()
//dynamically get this date' year value. If date already passed, then year=current year+1
var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>25)? currentyear+1 : currentyear
var christmas=new cdtime("countdowncontainer2", "December 25, "+thischristmasyear+" 0:0:00")
christmas.displaycountdown("days", formatresultsx)

</script>

====================================================

CUSTOMIZATION

Ok this will take time but its easy as pie. First you need to find the functions one by one and change the words for your occaision in them, for example my block says "seconds left until Hajj Begins"" so you can change Hajj to whatever.

Search for these functions one after the other:
function formatresults()

function formatresults1()

function formatresults2()

function formatresults3()

function formatresults4()

Note: you can also add more functions for more holidays / events here if you want. Just increase the function #
If you add additional functions please be sure to declare them as well in this part of the code:

Code Select


<hr />
<div id="countdowncontainer4"></div>

you will just copy that and paste another instance right after it with the number 5

And also here:

Code Select


var futuredate=new cdtime("countdowncontainer4", "October 13, 2007 23:59:00")
futuredate.displaycountdown("days", formatresults4)

Once again copy and paste changing 4 to 5 in the 2 places for countdowncontainer and for formatresults

----------------------------

Next thing is to search for this line:

Code Select


var futuredate=new cdtime("countdowncontainer", "December 30, 2006 23:59:00")
futuredate.displaycountdown("days", formatresults)

over here set the date for the event to count down to. Simple as pie. and you are set to go!

----------------------------

You can also change the pictures used and the background for the table.
To change it all you have to do is replace:
imdatesmain1.jpg (the main pic on the left)
and impdates_strip.gif (the background of the cells on the right)

----------------------------

If you want to change the font color size etc you can do it in this line of the code:

Code Select


<font size="1" color="#FFFFFF" face="Verdana">

---------------------------

If you wish to use this as a side block and not as a center one you will have to remove this table cell:

Code Select


<td width="360">
		<img border="0" src="imdatesmain1.jpg" width="360" height="165"></td>

===========================

I have made a few backgrounds and pictures for people to use if they want, hope u like them

Or if you prefer you can leave the backgrounds out altogether and have a clean look without images!

PS: I havent included the one I have on my page cos its mine

lol and dont anyone steal it

The previews of the styles I made are below:

To download the styles please download this file (PSD included)

Also since my page dosent use right side blocks so for some people the block may be too wide. In that case simple resize the big pic in the left side and make it smaller and also specify the size in the table cell in the code :up:

RoarinRow · December 17, 2006, 04:08:02 AM

ohhh now that's nice :up: I'll have to do that when I have time

brianjw · December 28, 2006, 05:04:57 PM

If anyone wants to see a demo as well as the one Aku has put up for us.
Click Here
Username: test
Password: test
Note: Please do not post or create topics since this is a test account.

Brianjw :up:

toyotaTRD · January 24, 2007, 02:21:49 PM

Great block Aku! I used it in www.oblivion.gr but it doesn't have started yet (I still wait for a date

). What a nice script!

Long Time Dead · May 13, 2007, 07:12:03 PM

Great script! Just what I've been looking for, and works like a dream! Thanks! :up:

Recent

User

Stats

Members

Stats

Users Online

Multiple Countdown Block

akulion

RoarinRow

brianjw

toyotaTRD

Long Time Dead