Count down script

[Scrounger]

1) Script Title: Dynamic Countdown

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lcount_dev.htm

3) Describe problem: I'm trying to use the LCD style countdown clock to a specific date in Julty 2008. (Scout Summer Camp) I started just trying to get the Christmas Countdown to work and then I would modify the code for my summer camp date. Unfortunately, I'm getting the code for the two examples mixed up and its a real mess now. I just deleted it all. What code is specific to the LCD and what is for the example above it.

Thanks.

Matthew

[ddadmin]

The LCD style countdown is the second example within the demo. Go to the demo page, and for the code of Step 2, just edit the code so all that's left is:

<div id="countdowncontainer2"></div>

<script type="text/javascript">

var currentyear=new Date().getFullYear()
//dynamically get this Christmas' year value. If Christmas 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", formatresults2)

</script>

[Scrounger]

I have the header part set up in the head section, but modifying to use the countdown to a specific date is not working so well. I can get it to count down to Christmas, but when I try to change for another date it fails.

Any suggestions?

Regards.

Matthew

[Scrounger]

Here's the code that I have added and where. I'm trying to find out who to hard code in a date in the head section so I can have it count down to a set date. It looks like both examples of the countdown are in the head section so I think a good bit of code can be removed.

The body code looks straight forward, but stil need to figure out the different date info.

<!-- start of head information -->

<style style="text/css">

.lcdstyle{ /*Example CSS to create LCD countdown look*/
background-color:black;
color:yellow;
font: bold 18px MS Sans Serif;
padding: 3px;
}

.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 80%
}

</style>

<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 March 23, 2009 18:25:00"
}
else{ //else if target date/time met
var displaystring="Future date is here!"
}
return displaystring
}

function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" ^days "+arguments[1]+" ^hours "+arguments[2]+" ^minutes "+arguments[3]+" ^seconds</span> left until this Christmas"
}
else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("Summer Camp is here!") //Instead, perform a custom alert
}
return displaystring
}

</script>


<!-- end of head information -->








<!-- located in code for LCD countdow to appear -->

<div id="countdowncontainer2"></div>

<script type="text/javascript">

var currentyear=new Date().getFullYear()
//dynamically get this Christmas' year value. If Christmas 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", "July 27, "+thischristmasyear+" 0:0:00")
christmas.displaycountdown("days", formatresults2)

</script>

Regards,

Matthew

[Scrounger]

Ignore the other posts, I've attached the test html page that I have the script on. You can see the error if you open and run the page.

[ddadmin]

If you're hard coding the date to count down to, you need to change the line:

var christmas=new cdtime("countdowncontainer2", "July 27, "+thischristmasyear+" 0:0:00")

Which currently dynamically counts down to next year's Christmas, to something like:

var christmas=new cdtime("countdowncontainer2", "March 23, 2009 18:25:00")

Obviously change March 23, 2009 18:25:00 to the desired date.

Also, note that your page is missing a <body> tag, which can cause problems. Add it to your page:

<body>
<!-- located in code for LCD countdow to appear -->

<div id="countdowncontainer2"></div>

[Scrounger]

Sweet, I think I have it going now. Time to add to real page and see what happens. Thanks again.

Regards

Matthew

[Scrounger]

One last question, I have the script running on the main page at www.cubpack88.org now. In the css style sheet below, what is the variable to have the whole LCD clock center in a table field. You can't see it to select it in Frontpage and all the align='center' commands I tried break the lcd clock.

<style style="text/css">

.lcdstyle{ /*Example CSS to create LCD countdown look*/
background-color:black;
color:yellow;
font: bold 18px Arial;
padding: 3px;
}

.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 80%
}

</style>

[ddadmin]

Inside the DIV tag that contains the countdown, try using CSS:

<div id="countdowncontainer2" style="text-align: center;"></div>

[Scrounger]

I was trying to do that buy adding it to the CSS at the top in the header section. Have the right commands just inthe wrong location.

Regards,

matthew