Created: 17/11/2012
By: Jason
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 filescopy 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
you can scroll down to check the properties details inforamtion -
5. start, stop, or destroy countdownjQuery("#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
-
createcreate countdown
-
destroydestroy countdown
jQuery("#DIV_TO_PLACE_COUNTDOWN").jCountdown("destroy"); -
stopstop countdown
jQuery("#DIV_TO_PLACE_COUNTDOWN").jCountdown("stop"); -
startstart countdown
jQuery("#DIV_TO_PLACE_COUNTDOWN").jCountdown("start");