Results 1 to 10 of 10

Thread: Count down script

  1. #1
    Join Date
    Jul 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Count down script

    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

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    <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>

  3. #3
    Join Date
    Jul 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Jul 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></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

  5. #5
    Join Date
    Jul 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

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

    Code:
    var christmas=new cdtime("countdowncontainer2", "July 27, "+thischristmasyear+" 0:0:00")
    Which currently dynamically counts down to next year's Christmas, to something like:

    Code:
    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:

    Code:
    <body>
    <!-- located in code for LCD countdow to appear -->
    
    <div id="countdowncontainer2"></div>

  7. #7
    Join Date
    Jul 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    Regards

    Matthew

  8. #8
    Join Date
    Jul 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  9. #9
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

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

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

  10. #10
    Join Date
    Jul 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •