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)
Open Sans (You can download it here as free: http://www.fontsquirrel.com/fonts/open-sans)
You can change font from CSS file.
Installing the timer requires the following steps.
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.
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. |