Free Web Script | FreeWebScript.com
Real Version
Free Web Script - FreeWebScript.com

jQuery Responsive Countdown with Visual Builder 2015

  • 1

jQuery Responsive Countdown with Visual Builder 2015 | FreeWebScript.com

This is a javascript based tool that uses the canvas object to animate SVG defined drawings. The tool uses a flip animation to display the remaining time to or the elapsed time from a target date. The tool detects change of width and height of its container object and responds accordingly. Since it uses vector data to draw the digits and the panels of the countdown, there is no change in the quality of the displayed drawings when it gets resized. The tool features around 30 options to customize but it can also be used in a simple configuration.

Basic Usage

1. In order to play, the tool needs to execute on a div that is relatively or absolutely positioned, because the tool creates layers of canvas objects within the div that are absolutely positioned. The div needs to have an id attribute in order to be easily selected. The div may have width defined with percent values. Every resize of browser will get detected by the tool and it will redraw accordingly. The height of the div is not important, because the tool will change it in order to draw the countdown. There is a parameter though that defines the maximum height the tool can have. Here is an example of a div object that can be used:

<div id="first_countdown" style="position: relative; width: 100%; height: 50px;"></div>

2. After you have created the div element you will need to import some Javascript files. These are jQuery, and the countdown plugin. In my demos, I add these in the header of the document.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.responsive_countdown.min.js"></script>

3. Lastly you need to select the div element and run the countdown. It is possible to not specify any options and the default ones will be used.

<script>

 jQuery(document).ready(function($){  

  $('#first_countdown').ResponsiveCountdown();

 });  

</script>

Features jQuery Responsive Countdown with Visual BuilderCount down / Count up.

  • Responsive behavior. The tool scales according to available width.
  • Visual tool that assist you to create your unique countdown.
  • Infinite color combinations. Solid color for the digits. Gradient color for the panels.
  • Show hide groups.
  • Two perspective modes.
  • Two sets of digits. Three sets of panels.
  • Setting of time zone.
  • Setting of label captions.
  • Setting of labels font and size.
  • Groups spacing. Groups divider – circles or squares.
  • Usage of time settings coming from a server. Synchronization takes place only during the initialization of the tool.
  • Custom mode, that allows setting of the digits by the usage of a public method.

UPDATE [18 MAR 2015]

New option added – f_weight. Issue fix in custom mode. 

jQuery Responsive Countdown with Visual Builder 2015

Important! We update new contents like PHP Scripts, WordPress Themes, Plugins, Mobile App Templates Source Code or Article like jQuery Responsive Countdown with Visual Builder 2015 for Online Marketers or Developers everyday. But remember, if you getting some resource file from here that you should never use this items in a commercial website. All the file/contents posted here for development & testing purpose only. if this post contains shared file, I Recommended you buy source code for supporting the Developer. we do not store all the files on this website/host, Hence We Are Not Violating Any Terms.

INFO: You have Ads-Block, Please support us with disable your Adblock and you got the file :)

DMCA.com Protection Status

Similar to jQuery Responsive Countdown with Visual Builder 2015

It Looks Like You Have AdBlocker Enabled

Please know that FreeWebScript.com relies solely on ads to keep producing and offering free content to you. We appreciate your disabling of Adblock to help support our site. If you have disabled ADBlock in your browser please Reload this Page.