Created: 17/11/2012
By: Jason
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Update Log

- v1.1.1 02/12/2012
  - fix bug about can't correctly parse some timeText format
- v1.1 27/11/2012
  - 1.Add new property width (Number)
  - 2. Add new property displayLabel (Boolean)
  - 3. Now texts won't warp, all texts will display in one line

Quick Start

- open the example.html in your html editor to edit the setting, and test it in your browser

How to use it

- 1. copy the jCountdown files
  copy the jCountdown folder to the folder where you put your html file
- 2. open your html file and include the js and css files between the <head> tag
- <head>
  <script src="jquery/jquery-1.8.2.min.js"></script>
  <link href="jcountdown/jcountdown.css" rel="stylesheet" type="text/css">
  <script src="jcountdown/jquery.jcountdown.min.js"></script>
  </head>
  PS: If you want to use jCountdown in many html pages,
  you can put the jCountdown floder to root folder of yoursite
  e.g. http://yoursite.com/jcountdown
  and include these code
  <script src="jquery/jquery-1.8.2.min.js"></script>
  <link href="http://yoursite.com/jcountdown/jcountdown.css" rel="stylesheet" type="text/css">
  <script src="http://yoursite.com/jcountdown/jquery.jcountdown.min.js"></script>
- 3. add a div to create the countdown between the <body> tag
  <body>
  <div id="DIV_TO_PLACE_COUNTDOWN"></div>
  </body>
- 4. add these scripts between the <body> tag to create the countdown
  <script> jQuery(document).ready(function(){ jQuery("#DIV_TO_PLACE_COUNTDOWN").jCountdown({ timeText:"2020/01/01 00:00:00", timeZone:8, style:"flip", color:"black", width:0, textGroupSpace:15, textSpace:0, reflection:true, reflectionOpacity:10, reflectionBlur:0, dayTextNumber:4, displayDay:true, displayHour:true, displayMinute:true, displaySecond:true, displayLabel:true, onFinish:function(){ alert("finish"); } }); }); </script>
  you can scroll down to check the properties details inforamtion
- 5. start, stop, or destroy countdown
  jQuery("#DIV_TO_PLACE_COUNTDOWN").jCountdown("start");
  jQuery("#DIV_TO_PLACE_COUNTDOWN").jCountdown("stop");
  jQuery("#DIV_TO_PLACE_COUNTDOWN").jCountdown("destroy");

How to change the font size, color and others

- you can find all source psd file in the folder psd
  you can edit it in the photoshop, and after you finish the change
  save it to a png and just put it in the folder jcountdown to replace the original style png file
  i.e. if you want to change the font color for style crystal
  just open the crystal_black.psd and crystal_white.psd
  and change the font color in photoshop
  and save it to folder jcountdown, replace the jcountdown_crystal_black.png and jcountdown_crystal_white.png

Properities

- timeText (String)
  Year/Month/Date Hour:Minute:Second
- timeZone (Number)
  GMT number
- style (String)
  Flip, Slide, Metal or Crystal
- color (String)
  Black or White
- width (Number)
  0~n (unlimited, default 0) (if you don't want to resize, it please set it to 0)
- textGroupSpace (Number)
  0~n (unlimited, default 15)
- textSpace (Number)
  0~n (unlimited, default 0)
- reflection (Boolean)
  true or false (default true) (this setting works in Firefox, Chrome, Safari, Opera and most mobile browser)
- reflection Opacity (Number)
  0~100 (default 10) (this setting works in Firefox, Chrome, Safari, Opera and most mobile browser)
- reflection Blur (Number)
  0~10 (default 0) (this setting works in Firefox, Chrome, Safari and most mobile browser)
- dayTextNumber (Number)
  2~n (unlimited, default 2)
- displayDay (Boolean)
  true or false (default true)
- displayHour (Boolean)
  true or false (default true)
- displayMinute (Boolean)
  true or false (default true)
- displaySecond (Boolean)
  true or false, (default true)
- displayLabel (Boolean)
  true or false, (default true)
- onFinish (function)
  execute some scripts when time's up

Methods

- create
  create countdown
  jQuery("#DIV_TO_PLACE_COUNTDOWN").jCountdown({ timeText:"2020/01/01 00:00:00", timeZone:8, style:"flip", color:"black", width:0, textGroupSpace:15, textSpace:0, reflection:true, reflectionOpacity:.1, reflectionBlur:0, dayTextNumber:4, displayDay:true, displayHour:true, displayMinute:true, displaySecond:true, displayLabel:true, onFinish:function(){ alert("finish"); } });
- destroy
  destroy countdown
  jQuery("#DIV_TO_PLACE_COUNTDOWN").jCountdown("destroy");
- stop
  stop countdown
  jQuery("#DIV_TO_PLACE_COUNTDOWN").jCountdown("stop");
- start
  start countdown
  jQuery("#DIV_TO_PLACE_COUNTDOWN").jCountdown("start");