8 Replies Latest reply: Mar 6, 2013 5:04 AM by Mich_lou RSS

    COUNT DOWN TIMER

    Mich_lou Community Member

      Hello Community,

       

      I really need your help in creating a count down timer for my site. I want to create a countdown timer similar to this one HERE for my homepage, however it seems like I can't set it up right. Please guide me on what I should do first. So far, I have created an index.html page (where I waould like it to be) and its still intact without any changes in respect to the countdown timer.

       

      What am  I supposed to do now, do I need to create a java file on which I need to paste the code  on or I have to paste the code in my index.html code? I'm also confused with the code, is it jquery, html or both.

       

      Please advise or help.

       

      Thank You.

        • 1. Re: COUNT DOWN TIMER
          sudarshan.t MVP

          Well.

           

          This should go into your CSS file - name it countdown.css:

          div#clock { color: white; margin: 20px auto; width: 600px; overflow: hidden; text-align: center; }

          div#clock p { background: #333; float: left; height: 88px; width: 88px; }

          div#clock p span { display: block; font-size: 50px; font-weight: bold; padding: 5px 0 0; }

          div#clock div.space { color: #ccc; display: block; line-height: 1.7em; font-size: 50px; float: left; height: 88px; width: 30px; }

          div.multi_clock{ border: 1px solid #666; color: #333; float: left; margin: 10px; padding: 5px; }

           

          This, into the <head> section of your HTML file:

           

          <link rel="stylesheet" type="text/css" href="countdown.css">

          <script src="jquery.countdown.js" type="text/javascript" charset="utf-8"></script>

          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

          <script type="text/javascript" charset="utf-8">

          // Javascript

          $(function() {

            var currentDate = new Date();

            $('div#clock').countdown(15 * 24 * 60 * 60 * 1000 + currentDate.valueOf(), function(event) {

              $this = $(this);

              switch(event.type) {

                case "seconds":

                case "minutes":

                case "hours":

                case "days":

                case "weeks":

                case "daysLeft":

                  $this.find('span#'+event.type).html(event.value);

                  break;

                case "finished":

                  $this.fadeTo('slow', .5);

                  break;

              }

            });

          });

          </script>

           

          Most important part: The red highlights on the code above:

           

          • div#clock is nothing but the target DIV ID where the clock will show. The HTML will have a <div id="clock"> in this scenario. Notice the HTML code below.
          • 15 * 24 * 60 * 60 - Days x Hours x Minutes x Seconds - Modify this to whatever value you want. For example, for 7 days, you will have 7 * 24 * 60 * 60

           

          Put this into a new file called jquery.countdown.js (JavaScript file):

           

          /*

          * jQuery The Final Countdown plugin v1.0.0 beta

          * http://github.com/hilios/jquery.countdown

          *

          * Copyright (c) 2011 Edson Hilios

          *

          * Permission is hereby granted, free of charge, to any person obtaining

          * a copy of this software and associated documentation files (the

          * "Software"), to deal in the Software without restriction, including

          * without limitation the rights to use, copy, modify, merge, publish,

          * distribute, sublicense, and/or sell copies of the Software, and to

          * permit persons to whom the Software is furnished to do so, subject to

          * the following conditions:

          *

          * The above copyright notice and this permission notice shall be

          * included in all copies or substantial portions of the Software.

          *

          * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,

          * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF

          * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND

          * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE

          * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION

          * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION

          * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

          */

          (function($) {

           

            $.fn.countdown = function(toDate, callback) {

              var handlers = ['seconds', 'minutes', 'hours', 'days', 'weeks', 'daysLeft'];

           

              function delegate(scope, method) {

                return function() { return method.call(scope) }

              }

           

              return this.each(function() {

                // Convert

                if(!(toDate instanceof Date)) {

                  if(String(toDate).match(/^[0-9]*$/)) {

                    toDate = new Date(toDate);

                  } else if( toDate.match(/([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{2,4})\s([0-9]{1,2})\:([0-9]{2})\:([0-9]{ 2})/) ||

                      toDate.match(/([0-9]{2,4})\/([0-9]{1,2})\/([0-9]{1,2})\s([0-9]{1,2})\:([0-9]{2})\:([0-9]{ 2})/)

                      ) {

                    toDate = new Date(toDate);

                  } else if(toDate.match(/([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{2,4})/) ||

                            toDate.match(/([0-9]{2,4})\/([0-9]{1,2})\/([0-9]{1,2})/)

                            ) {

                    toDate = new Date(toDate)

                  } else {

                    throw new Error("Doesn't seen to be a valid date object or string")

                  }

                }

           

                var $this = $(this),

                    values = {},

                    lasting = {},

                    interval = $this.data('countdownInterval'),

                    currentDate = new Date(),

                    secondsLeft = Math.floor((toDate.valueOf() - currentDate.valueOf()) / 1000);

           

                function triggerEvents() {

                  secondsLeft--;

                  if(secondsLeft < 0) {

                    secondsLeft = 0;

                  }

                  lasting = {

                    seconds : secondsLeft % 60,

                    minutes : Math.floor(secondsLeft / 60) % 60,

                    hours   : Math.floor(secondsLeft / 60 / 60) % 24,

                    days    : Math.floor(secondsLeft / 60 / 60 / 24),

                    weeks   : Math.floor(secondsLeft / 60 / 60 / 24 / 7),

                    daysLeft: Math.floor(secondsLeft / 60 / 60 / 24) % 7

                  }

                  for(var i=0; i<handlers.length; i++) {

                    var eventName = handlers[i];

                    if(values[eventName] != lasting[eventName]) {

                      values[eventName] = lasting[eventName];

                      dispatchEvent(eventName);

                    }

                  }

                  if(secondsLeft == 0) {

                    stop();

                    dispatchEvent('finished');

                  }

                }

                triggerEvents();

           

                function dispatchEvent(eventName) {

                  var event = $.Event(eventName);

                  event.date  = new Date(new Date().valueOf() + secondsLeft);

                  event.value = values[eventName] || "0";

                  event.toDate = toDate;

                  event.lasting = lasting;

                  switch(eventName) {

                    case "seconds":

                    case "minutes":

                    case "hours":

                      event.value = event.value < 10 ? '0'+event.value.toString() : event.value.toString();

                      break;

                    default:

                      if(event.value) {

                        event.value = event.value.toString();

                      }

                      break;

                  }

                  callback.call($this, event);

                }

           

                $this.bind('remove', function() {

                  stop(); // If the selector is removed clear the interval for memory sake!

                  dispatchEvent('removed');

                });

           

                function stop() {

                  clearInterval(interval);

                }

           

                function start() {

                  $this.data('countdownInterval', setInterval(delegate($this, triggerEvents), 1000));

                  interval = $this.data('countdownInterval');

                }

           

                if(interval) stop();

                start();

              });

            }

            // Wrap the remove method to trigger an event when called

            var removeEvent = new $.Event('remove'),

                removeFunction = $.fn.remove;

            $.fn.remove = function() {

              $(this).trigger(removeEvent);

              return removeFunction.apply(this, arguments);

            }

          })(jQuery);

           

          This should come in the <body> section of your HTML page - wherever you want the timer to appear:

           

          <div id="clock">

            <p>

              <span id="weeks"></span>

              Weeks

            </p>

            <div class="space">:</div>

            <p>

              <span id="daysLeft"></span>

              Days

            </p>

            <div class="space">:</div>

            <p>

              <span id="hours"></span>

              Hours

            </p>

            <div class="space">:</div>

            <p>

              <span id="minutes"></span>

              Minutes

            </p>

            <div class="space">:</div>

            <p>

              <span id="seconds"></span>

              Seconds

            </p>

          </div>

           

          Save it. Run it.

          • 2. Re: COUNT DOWN TIMER
            sudarshan.t MVP

            Out of curiousity, there's a much more comprehensive, customizable timer if you're looking for alternatives: http://keith-wood.name/countdown.html

            • 3. Re: COUNT DOWN TIMER
              MurraySummers ACP/MVPs

              @Mich_lou, just to close the loop, it's JavaScript, not Java. Those two are about as different as fish and bicycles (to paraphrase a well-known author).

              • 4. Re: COUNT DOWN TIMER
                Mich_lou Community Member

                Hi Sudarshan,

                 

                Thanks for your effort to help. However it seems that the timer can display properly, both in DW live view or my browser. Please the screenshot below, thats what I'm now getting after following the steps you gave me.

                 

                Help.PNG

                 

                In addition, here are the full codes/tags that I'm using for the above image.

                 

                HTML

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <link href="countdown.css" rel="stylesheet" type="text/css" />
                <style type="text/css">
                body {
                          background-color: #F3F3F3;
                }
                </style>
                link rel="stylesheet" type="text/css" href="countdown.css">
                <script src="jquery.countdown.js" type="text/javascript" charset="utf-8"></script>
                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
                <script type="text/javascript" charset="utf-8">
                // Javascript
                $(function() {
                  var currentDate = new Date();
                  $('div#clock').countdown(15 * 24 * 60 * 60 * 1000 + currentDate.valueOf(), function(event) {
                    $this = $(this);
                    switch(event.type) {
                      case "seconds":
                      case "minutes":
                      case "hours":
                      case "days":
                      case "weeks":
                      case "daysLeft":
                        $this.find('span#'+event.type).html(event.value);
                        break;
                      case "finished":
                        $this.fadeTo('slow', .5);
                        break;
                    }
                  });
                });
                </script>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>sitesincs | Home</title>
                </head>
                
                
                <body><div id="clock">
                  <p>
                    <span id="weeks"></span>
                    Weeks
                  </p>
                  <div class="space">:</div>
                  <p>
                    <span id="daysLeft"></span>
                    Days
                  </p>
                  <div class="space">:</div>
                  <p>
                    <span id="hours"></span>
                    Hours
                  </p>
                  <div class="space">:</div>
                  <p>
                    <span id="minutes"></span>
                    Minutes
                  </p>
                  <div class="space">:</div>
                  <p>
                    <span id="seconds"></span>
                    Seconds
                  </p>
                </div>
                </body>
                </html>
                
                

                 

                 

                CSS

                @charset "utf-8";
                /* CSS Document */
                div#clock { color: white; margin: 20px auto; width: 600px; overflow: hidden; text-align: center; }
                div#clock p { background: #333; float: left; height: 88px; width: 88px; }
                div#clock p span { display: block; font-size: 50px; font-weight: bold; padding: 5px 0 0; }
                div#clock div.space { color: #ccc; display: block; line-height: 1.7em; font-size: 50px; float: left; height: 88px; width: 30px; }
                div.multi_clock{ border: 1px solid #666; color: #333; float: left; margin: 10px; padding: 5px; }
                
                

                 

                 

                 

                Java

                 

                 

                /*
                * jQuery The Final Countdown plugin v1.0.0 beta
                * http://github.com/hilios/jquery.countdown
                *
                * Copyright (c) 2011 Edson Hilios
                *
                * Permission is hereby granted, free of charge, to any person obtaining
                * a copy of this software and associated documentation files (the
                * "Software"), to deal in the Software without restriction, including
                * without limitation the rights to use, copy, modify, merge, publish,
                * distribute, sublicense, and/or sell copies of the Software, and to
                * permit persons to whom the Software is furnished to do so, subject to
                * the following conditions:
                *
                * The above copyright notice and this permission notice shall be
                * included in all copies or substantial portions of the Software.
                *
                * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
                * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
                * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
                * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
                * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
                * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
                * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
                */
                (function($) {
                
                  $.fn.countdown = function(toDate, callback) {
                    var handlers = ['seconds', 'minutes', 'hours', 'days', 'weeks', 'daysLeft'];
                
                    function delegate(scope, method) {
                      return function() { return method.call(scope) }
                    }
                
                    return this.each(function() {
                      // Convert
                      if(!(toDate instanceof Date)) {
                        if(String(toDate).match(/^[0-9]*$/)) {
                          toDate = new Date(toDate);
                        } else if( toDate.match(/([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{2,4})\s([0-9]{1,2})\ :([0-9]{2})\:([0-9]{2})/) ||
                            toDate.match(/([0-9]{2,4})\/([0-9]{1,2})\/([0-9]{1,2})\s([0-9]{1,2})\ :([0-9]{2})\:([0-9]{2})/)
                            ) {
                          toDate = new Date(toDate);
                        } else if(toDate.match(/([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{2,4})/) ||
                                  toDate.match(/([0-9]{2,4})\/([0-9]{1,2})\/([0-9]{1,2})/)
                                  ) {
                          toDate = new Date(toDate)
                        } else {
                          throw new Error("Doesn't seen to be a valid date object or string")
                        }
                      }
                
                      var $this = $(this),
                          values = {},
                          lasting = {},
                          interval = $this.data('countdownInterval'),
                          currentDate = new Date(),
                          secondsLeft = Math.floor((toDate.valueOf() - currentDate.valueOf()) / 1000);
                
                      function triggerEvents() {
                        secondsLeft--;
                        if(secondsLeft < 0) {
                          secondsLeft = 0;
                        }
                        lasting = {
                          seconds : secondsLeft % 60,
                          minutes : Math.floor(secondsLeft / 60) % 60,
                          hours   : Math.floor(secondsLeft / 60 / 60) % 24,
                          days    : Math.floor(secondsLeft / 60 / 60 / 24),
                          weeks   : Math.floor(secondsLeft / 60 / 60 / 24 / 7),
                          daysLeft: Math.floor(secondsLeft / 60 / 60 / 24) % 7
                        }
                        for(var i=0; i<handlers.length; i++) {
                          var eventName = handlers[i];
                          if(values[eventName] != lasting[eventName]) {
                            values[eventName] = lasting[eventName];
                            dispatchEvent(eventName);
                          }
                        }
                        if(secondsLeft == 0) {
                          stop();
                          dispatchEvent('finished');
                        }
                      }
                      triggerEvents();
                
                      function dispatchEvent(eventName) {
                        var event = $.Event(eventName);
                        event.date  = new Date(new Date().valueOf() + secondsLeft);
                        event.value = values[eventName] || "0";
                        event.toDate = toDate;
                        event.lasting = lasting;
                        switch(eventName) {
                          case "seconds":
                          case "minutes":
                          case "hours":
                            event.value = event.value < 10 ? '0'+event.value.toString() : event.value.toString();
                            break;
                          default:
                            if(event.value) {
                              event.value = event.value.toString();
                            }
                            break;
                        }
                        callback.call($this, event);
                      }
                
                      $this.bind('remove', function() {
                        stop(); // If the selector is removed clear the interval for memory sake!
                        dispatchEvent('removed');
                      });
                
                      function stop() {
                        clearInterval(interval);
                      }
                
                      function start() {
                        $this.data('countdownInterval', setInterval(delegate($this, triggerEvents), 1000));
                        interval = $this.data('countdownInterval');
                      }
                
                      if(interval) stop();
                      start();
                    });
                  }
                  // Wrap the remove method to trigger an event when called
                  var removeEvent = new $.Event('remove'),
                      removeFunction = $.fn.remove;
                  $.fn.remove = function() {
                    $(this).trigger(removeEvent);
                    return removeFunction.apply(this, arguments);
                  }
                })(jQuery);
                
                
                

                 

                 

                In addition a new file, jquery.min.js has been created.

                 

                Please let me know if you need addiotional info.

                • 5. Re: COUNT DOWN TIMER
                  Mich_lou Community Member

                  Thanks Mr Murray, I had no idea that the two words meant different things, thanks!

                  • 6. Re: COUNT DOWN TIMER
                    Mich_lou Community Member

                    I visted this site prior to coming here, however as a newbie in web designing I couldn't figure out how to do the code correctly. Thanks for suggesting the site.

                    • 7. Re: COUNT DOWN TIMER
                      sudarshan.t MVP

                      My bad. The order of calling for the jQuery library from CDN and using the actual script was flipped, thereby causing a 'null' display.

                       

                      Find these lines in your HTML code:

                       

                      link rel="stylesheet" type="text/css" href="countdown.css">
                      <script src="jquery.countdown.js" type="text/javascript" charset="utf-8"></script>
                      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

                       

                      Change to this:

                       

                      <link rel="stylesheet" type="text/css" href="countdown.css">
                      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
                      <script src="jquery.countdown.js" type="text/javascript" charset="utf-8"></script>

                       

                      Notice your code was missing a < less then sign before link rel. Added that. Plus, I've flipped 2nd and 3rd lines - we have to first call the jquery library before running our script.

                       

                      Try it out now.

                      • 8. Re: COUNT DOWN TIMER
                        Mich_lou Community Member

                        Thanks for your help Sudarshan. I made use of some youtube videos, and managed to create it. Thanks!