Skip navigation
Mich_lou
Currently Being Moderated

COUNT DOWN TIMER

Mar 5, 2013 5:07 AM

Tags: #timer #countdown

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.

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 5, 2013 5:24 AM   in reply to Mich_lou

    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.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 5, 2013 5:29 AM   in reply to Sudarshan Thiagarajan

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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 5, 2013 5:50 AM   in reply to Sudarshan Thiagarajan

    @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).

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 5, 2013 9:46 AM   in reply to Mich_lou

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points