Permalink
Browse files

Updated demo and readme

Removed unnecessary files
  • Loading branch information...
1 parent 2723940 commit d404275a8c7bb78587e0c3bd41f484cf048e6ec8 @shvchk committed Sep 28, 2011
Showing with 76 additions and 373 deletions.
  1. +22 −12 README.txt
  2. BIN css/digit-sprite.png
  3. +0 −60 css/jquery.countdown-timer.css
  4. +54 −17 demo.html
  5. +0 −284 js/jquery.countdown-timer.js
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>
View
Deleted file not rendered
@@ -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; }
-
-
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>
Oops, something went wrong.

0 comments on commit d404275

Please sign in to comment.