Countdown timer with flipping animation
FlashBlue
Created: 16/12/2016
Last Update: 27/12/2016
By: FlashBlue
Profile: www.codegrape.com/user/flashblue
Website: www.flashbluedesign.com
E-mail: flashblue80@hotmail.com
Twitter: twitter.com/flashblue80

 

Table of Contents

  1. Directories
  2. Font Used
  3. Installation
  4. Plugin Parameters

A) Directories

source - Original source files other files are part of the source, you do not need to upload any of these to your server. Use these to change the code or style.

deploy – Published files for adding item to the site. These are the files you need to upload to your server.

help – Help file (HTML)


B) Font Used

Open Sans (You can download it here as free: http://www.fontsquirrel.com/fonts/open-sans)

You can change font from CSS file.


C) Installation

Installing the timer requires the following steps.

  1. Including the javascript files.
  2. Specifying the html tags of the timer within your page.
  3. Instantiating a javascript function call with any optional parameters.

Below describes these steps in more detail.

In step 1, to include css files, simply specify the following lines of code within your <head> tag:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'>

You can use another Google web font or fully remove it if you want.

In step 2, you will need to include the jquery's library files, other plugins used and the timer's file jquery.royal-timer.js which is located in the js directory. The code below shows the include in a html page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.royal-timer.js"></script>

Note: The css, js files are the compressed production version of the file. If you intend to modify the timer's source code, you will need to look at files in source folder and it is recommended that you minify the modified file afterwards.

In step 3, to specify the tags of the timer itself, refer to the example in the index.html file. In that file, you'll see a block of tag starting and ending with:

<div class="royaltimer-container"></div>

Finally in step 4, you will need to instantiate a javascript function call to get the timer initialized. The example code looks like this below:

<script type="text/javascript">
  $(document).ready(function() {
    royalCountdown = new RoyalCountdown(); //Add countdown as object
				
    //Holder
    royalCountdown.container = ".royaltimer-container",

    //Timezone
    royalCountdown.timeZone = -5,          //Time zone of New York

    //Date & time to countdown
    royalCountdown.year = 2019,
    royalCountdown.month = 03,
    royalCountdown.day = 15,
    royalCountdown.hour = 12,
    royalCountdown.minute = 30,
    royalCountdown.second = 0,

    royalCountdown.flipCount = 9,         //Number of flip-elements(from 1 to 9)
    royalCountdown.animationTime = 950,   //Time of flip animation in milliseconds(from 50 to 950)
    royalCountdown.bgColor = "#f07000",   //Flip-element back color
    royalCountdown.digitColor = "#fff",   //Digits color on flip-elements
    royalCountdown.textColor = "#666",    //Text color under flip elements(seconds, minutes and etc.)

    royalCountdown.Start();               //Start countdown
  });
</script>

This will instantiate the timer.


D) Plugin Parameters

You can change some common attributes of the timer through the parameters.

Attribute Properties Description
container string - Default: .royaltimer-container The container of the timer.
timeZone number - Default: 0 Specifies the time zone. GMT number.
http://www.timeanddate.com/time/map/
year number - Default: 0 Specifies the year of the timer.
month number - Default: 0 Specifies the month of the timer.
day number - Default: 0 Specifies the day of the timer.
hour number - Default: 0 Specifies the hour of the timer.
minute number - Default: 0 Specifies the minute of the timer.
second number - Default: 0 Specifies the second of the timer.
flipCount number - Default: 9 Specifies the number of flip elements.
animationTime number - Default: 950 Time of flip animation in milliseconds.
bgColor string - Default: #f07000 Flip element backgroun color.
digitColor string - Default: #fff Digits color on flip elements.
textColor string - Default: #666 Text color under flip elements.
isDynamicColor boolean - Default: true Background color will vary if true. Set to true or false.