Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Updated demo and readme

Removed unnecessary files
  • Loading branch information...
commit d404275a8c7bb78587e0c3bd41f484cf048e6ec8 1 parent 2723940
Andrei Shevchuk authored
34 README.txt
View
@@ -13,16 +13,18 @@ Countdown Timer supports the following user definable options.
display_as_text : Boolean value. When set as "true" the remaining time is displayed in simple text. When set as the default "false" the remaining time is wrapped in HTML to facilitate CSS styling.
-to : Date time string to count down to. String must be formatted as yyyy:mm:dd:mm:ss. Default value is "2025:06:14:00:01".
+to : Date time string to count down to. String must be formatted as yyyy:mm:dd:mm:ss. Default value is "2111:11:11:11:11".
separator : If the display_as_text value is set to true, then this value will be used to separate the digits in the countdown display. If an empty or null value is passed the default colon (:) is used. If a string containing multiple characters is passed then only the first character will be used.
-significant_days : Then number of digits used to display the value of remaining days. If the number of days required more digits than are permitted the value is truncated to show the least significant digits. If the number of days requires fewer digits than are permitted the vaule is left padded with zeros. Default number of day digits is 3.
+significant_days : If the number of days requires fewer digits than set here, then the vaule is left padded with zeros. Default number of day digits is 2.
+
+UTC : Boolean value. When set as "true" the time to count down to is considered to be universal (UTC). When set as the default "false" the time to count down to is considered to be local.
Implementation
--------------
-A sample implementation is provided in the accompanying HTML document "demo.html".
+A sample implementation is provided in the accompanying HTML document "demo.html". Live demo: http://jsfiddle.net/Shevchuk/AghR3/
Countdown Timer requires the jQuery library to be loaded. Insert the following code into your HTML document where you would like the Countdown Timer to appear.
@@ -45,27 +47,35 @@ If display_as_text is set as true the Countdown Timer will output the time remai
<div class="clock-bezel">
<div class="unit">
- <div class="digit number-9">9</div>
- <div class="digit number-8">7</div>
- <div class="digit number-7">7</div>
+ <div class="digits">
+ <div class="digit number-9">9</div>
+ <div class="digit number-8">7</div>
+ <div class="digit number-7">7</div>
+ </div>
<div class="label">Days</div>
</div>
<div class="separator">:</div>
<div class="unit">
- <div class="digit number-0">0</div>
- <div class="digit number-1">1</div>
+ <div class="digits">
+ <div class="digit number-0">0</div>
+ <div class="digit number-1">1</div>
+ </div>
<div class="label">Hours</div>
</div>
<div class="separator">:</div>
<div class="unit">
- <div class="digit number-2">2</div>
- <div class="digit number-3">3</div>
+ <div class="digits">
+ <div class="digit number-2">2</div>
+ <div class="digit number-3">3</div>
+ </div>
<div class="label">Minutes</div>
</div>
<div class="separator">:</div>
<div class="unit">
- <div class="digit number-4">4</div>
- <div class="digit number-5">5</div>
+ <div class="digits">
+ <div class="digit number-4">4</div>
+ <div class="digit number-5">5</div>
+ </div>
<div class="label">Seconds</div>
</div>
</div>
BIN  css/digit-sprite.png
View
Deleted file not rendered
60 css/jquery.countdown-timer.css
View
@@ -1,60 +0,0 @@
-/*
- * CSS Style Sheet for jQuery Countdown Timer
- * ==========================================
- * Author: Duncan McMillan
- *
- * Copyright (c) January 2011 Art & Soul
- * http://www.artandsoul.co.uk
- *
- * Released under the MIT license.
- * http://en.wikipedia.org/wiki/MIT_License
- */
-
-/* Layout ---------------------------------------------- */
-
-.clock-bezel .digit, .clock-bezel .separator, .clock-bezel .unit { float:left; }
-.clock-bezel .digit, .clock-bezel .separator { text-indent:-1000px; overflow:hidden; }
-
-.clock-bezel .unit { margin:0 3px; }
-
-.clock-bezel { width:450px; height:80px; padding:5px;}
-.clock-bezel .digit { width:47px; height:60px; }
-.clock-bezel .separator { width:9px; height:60px; display:none; }
-.clock-bezel .label { text-align:center; clear:both; }
-
-/* Appearance ------------------------------------------ */
-
-.clock-bezel {
- background-color:#333;
- background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333));
- background: -moz-linear-gradient(top, #555, #333);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#333333');
- color:#FFF;
- -moz-border-radius: 10px;
- -webkit-border-radius: 10px;
-}
-.clock-bezel .digit { background-color:#000; }
-
-/* Typography ------------------------------------------ */
-.clock-bezel .label {
- font: 12px/2em "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
- font-weight:bold;
- text-shadow: #000 2px 2px 1px;
-}
-
-/* Sprite-driven Digits -------------------------------- */
-
-.digit { background-image:url(digit-sprite.png); background-repeat:no-repeat; }
-
-.digit.number-0 { background-position: 0px 0px; }
-.digit.number-1 { background-position: -50px 0px; }
-.digit.number-2 { background-position:-100px 0px; }
-.digit.number-3 { background-position:-150px 0px; }
-.digit.number-4 { background-position:-200px 0px; }
-.digit.number-5 { background-position:-250px 0px; }
-.digit.number-6 { background-position:-300px 0px; }
-.digit.number-7 { background-position:-350px 0px; }
-.digit.number-8 { background-position:-400px 0px; }
-.digit.number-9 { background-position:-450px 0px; }
-
-
71 demo.html
View
@@ -1,23 +1,60 @@
-<!DOCTYPE HTML>
+<!doctype html>
<html>
<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-<style type="text/css">
- body { background-color:#000; color:#FFF; }
-</style>
-<link rel="stylesheet" type="text/css" href="css/jquery.countdown-timer.css" />
-<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
-<script type="text/javascript" src="js/jquery.countdown-timer.js"></script>
-<title>Countdown Timer jQuery Plug-in</title>
-</head>
-<body>
- <div id="clock">Counter goes here</div>
+ <meta charset='utf-8'>
+ <title>Countdown</title>
+
+ <!-- Link jQuery and the plugin -->
+ <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
+ <script src='https://raw.github.com/shvchk/jQuery-Countdown-Timer/master/jquery.countdown-timer.min.js'></script>
- <!-- jQuery to be executed on page load -->
- <script type="text/javascript">
+ <!-- Initialize the plugin -->
+ <script>
$(document).ready(function() {
- $('#clock').countdown( { to : '2011:12:25:00:00' } );
+ $('body').countdown({
+ to: '2011:11:11:00:00',
+ separator: ' ',
+ significant_days: 1,
+ UTC: true
+ });
});
</script>
-</body>
-</html>
+
+
+ <!-- That's all! Let's just style it a bit =] -->
+ <style>
+ @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Lato:100&text=0123456789ДниЧасыМинутыСекунды);
+
+ body {
+ margin: 0;
+ padding: 1em 0 0;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAA+UlEQVRYhc3XOQ6EMBBE0c+kvv9NIWYCJIRYjLGrlz7A11NlPc3zjOhKKarUTxUSmpZl0bC0JiRryU2MsyxMDLKMTIyw7Ex0s0xN9LGsTXSwHEx8ZfmY+MRyM9HO8jTRyHI20cLyN/HKCjFRZ0WZqLACTTyxYk3cssJNXFkZTJxYSUwcWXlM7KxUJjZWNhMwresqCaEzIXxfhaZSioalNSFZS25inGVhYpBlZGKEZWeim2Vqoo9lbaKD5WDiK8vHxCeWm4l2lqeJRpaziRaWv4lXVoiJOivKRIUVaOKJFWvilhVu4srKYOLESmLiyMpjYmelMrGxspmAPwu/mTzgUZhGAAAAAElFTkSuQmCC);
+ font: 1.8em 'Lato', 'Open Sans Condensed', sans-serif;
+ text-align: center;
+ }
+
+ .unit, .digits, .digit, .separator {
+ display: inline-block;
+ }
+
+ .digits {
+ color: #fff;
+ background: #111;
+ width: 1.5em;
+ margin: .05em;
+ font-size: 6em;
+ border-radius: .1em;
+ }
+
+ .digit {
+ position: relative;
+ top: -.05em;
+ }
+
+ .label {
+ color: #aaa;
+ }
+ </style>
+</head>
+<body></body>
+</html>
284 js/jquery.countdown-timer.js
View
@@ -1,284 +0,0 @@
-/*
- * Countdown Timer jQuery Plug-in
- * ==============================
- * Author: Duncan McMillan
- *
- * Copyright (c) January 2011 Art & Soul
- * http://www.artandsoul.co.uk
- *
- * Released under the MIT license.
- * http://en.wikipedia.org/wiki/MIT_License
- *
- * Version 1.0.1
- */
-
-(function($){
-
- var options = {
- display_as_text : false,
- to : '2025:06:14:00:01', // Yikes - I’ll be 60!
- separator : ':',
- significant_days : 3
- };
-
- var tick_interval;
- var element;
- var seconds_remaining;
-
- $.fn.countdown = function (config_options)
- {
- /*
- * Initialise
- *
- * Prepare data and trigger regular execution of code
- *
- * @param container Reference to DOM element where counter will be displayed
- */
- var initialise = function (container)
- {
- // Store a reference to the DOM element that will hold our counter display
- element = container;
-
- // Split the specified date/time string into an array
- var date_elements = options.to.split(':');
-
- // Create Date objects for start and end date/times
- var end_date = new Date (date_elements[0], date_elements[1] - 1, date_elements[2], date_elements[3], date_elements[4]);
- var start_date = new Date();
-
- // Calculate number of seconds remain until end date/time
- seconds_remaining = (end_date.getTime() - start_date.getTime()) * .001;
-
- // If end point is already history there’s no point in continuing
- if (seconds_remaining < 0) {
- seconds_remaining = 0;
- }
-
- // Update the display
- update(seconds_remaining);
-
- // Trigger the regular execution of
- tick_interval = setInterval(tick, 1000);
- };
-
- /*
- * Tick
- *
- * Called at regular time interval to track time and trigger update of counter display.
- * If end date/time is reached the interval is destroyed.
- *
- */
- var tick = function ()
- {
- seconds_remaining --;
-
- if (seconds_remaining >= 0) {
- update(seconds_remaining);
- } else {
- clearInterval(tick_interval);
- }
- };
-
- /*
- * Update
- *
- * Upadate counter display with either plain text display or time data wrapped in HTML for CSS formatting
- *
- * @param seconds_remaining Number of seconds remaining until end date/time
- */
- var update = function (seconds_remaining)
- {
- var html;
- var time_str = assemble_time_str(seconds_remaining);
-
- if (options.display_as_text){
- html = time_str;
- } else {
- html = wrap_in_html(time_str);
- }
-
- // Insert HTML into DOM element
- element.html(html);
- }
-
- /*
- * Assemble Time String
- *
- * Convert the number of remaining seconds into a string to
- * represent the time remaining in dd:hh:mm:ss format
- *
- * @param seconds_remaining The number of seconds remaining until end date/time
- *
- * @return int Padded and formatted string with value of time remaining
- */
- var assemble_time_str = function (seconds_remaining)
- {
- time_array = new Array();
-
- // Calculate number of days
- var day = String(Math.floor(seconds_remaining / 86400));
-
- // Truncate or pad day value to fit number of significant days as specified
- if (String(day).length > options.significant_days){
- time_array.push(day.substr(day.length - options.significant_days));
- } else {
- time_array.push(str_pad(day, options.significant_days, "0"));
- }
-
- // Calculate number of hours and pad to two digits if required
- var hrs = String(Math.floor((seconds_remaining % 86400) / 3600));
- time_array.push(str_pad(hrs, 2, "0"));
-
- // Calculate number of minutes and pad to two digits if required
- var min = String(Math.floor((seconds_remaining % 3600) / 60));
- time_array.push(str_pad(min, 2, "0"));
-
- // Calculate number of seconds and pad to two digits if required
- var sec = String(Math.floor(seconds_remaining % 60));
- time_array.push(str_pad(sec, 2, "0"));
-
- // Sanitise value of options.separator
- var safe_separator;
-
- switch (true)
- {
- case (options.separator == '') :
- case (options.separator == null) :
- // Empty value passed in by user so default to ':'
- safe_separator = ':';
- break;
-
- case (options.separator.length > 1) :
- // Too many characters passed in so just use first one
- safe_separator = options.separator.substr(0, 1);
- break;
-
- default :
- safe_separator = options.separator;
- }
-
- // Collapse entire array into a string and return
- return time_array.join(safe_separator);
- };
-
- /*
- * Wrap IN HTML
- *
- * Dissassemble the formatted time string and wrap in HTML elements with label values for units
- *
- * @param time_str Time string formatted a ddd:hh:mm:ss
- *
- * @return str Time remaining in HTML format for CSS styling
- */
- var wrap_in_html = function (time_str)
- {
- var css_class;
- var label;
-
- // Create opening container element
- var html_output = '<div class="clock-bezel">';
-
- // Iterate over characters in formatted time string
- for (i = 0; i < time_str.length; i ++)
- {
- chr = time_str.substr(i, 1);
-
- // Determine whether character is a separator or a digit and set CSS class accordingly
- if (chr == options.separator){
- css_class = 'separator';
- } else {
- css_class = 'digit number-' + chr;
- }
-
- // Create container element to hold character and apply CSS clas
- var html = '<div class="' + css_class + '">' + chr + '</div>';
-
- // "Digit" divs are groped within a "unit" container which includes a label to display the type of
- // unit e.g. Days, Hours, Minutes etc. The position of the character in the time string allows us to
- // determine which group of units the digit belongs to and whether it is the first or last in its group
- switch (i)
- {
- // Deal with MOST significant digit of current unit
- case 0 :
- case time_str.length - 2 :
- case time_str.length - 5 :
- case time_str.length - 8 :
- // New group of units - open div and prepend to digit HTML
- html = '<div class="unit">' + html;
- break;
-
- // Deal with LEAST significant digit of current unit
- case options.significant_days - 1 :
- // Append Days label and close unit group
- html += '<div class="label">Days</div></div>';
- break;
-
- case time_str.length - 1 :
- // Append Seconds label and close unit group
- html += '<div class="label">Seconds</div></div>';
- break;
-
- case time_str.length - 4 :
- // Append Minutes label and close unit group
- html += '<div class="label">Minutes</div></div>';
- break;
-
- case time_str.length - 7 :
- // Append Hours label and close unit group
- html += '<div class="label">Hours</div></div>';
- break;
-
- default :
- // Do nowt
- }
-
- // Append HTML for current character to output
- html_output += html;
- }
-
- // Close initial container element
- html_output += '</div>';
-
- // Return the assembled HTML
- return html_output;
- }
-
- /*
- * String Pad
- *
- * Takes string and left pads it to desired length using character supplied. If padding
- * is more than one character in length only the first character will be used.
- *
- * @param input Original string
- * @param len Desired length [optional: defaults to input length + 1]
- * @param str Character with which input should be padded [optional: defaults to 0]
- *
- * @return str Input string left padded to desired lenght
- */
- var str_pad = function (input, len, str)
- {
- var padding = '';
-
- if (str == null) {
- str = "0";
- }
-
- if (len == null) {
- len = input.length + 1;
- }
-
- for (i = input.length; i < len; i++)
- {
- padding += str.substr(0, 1);
- }
-
- return padding + input;
- }
-
- $.extend(options, config_options);
- initialise(this);
-
- return (this);
- };
-
-})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.