Home / Premium Pro Plugins / jQuery Responsive Countdown with Visual Builder

jQuery Responsive Countdown with Visual Builder

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...Loading...



DOWNLOAD

WP version

Demo1
Description

It is a javascript primarily based device that makes use of the canvas object to animate SVG outlined drawings. The device makes use of a flip animation to show the remaining time to or the elapsed time from a goal date. The device detects change of width and peak of its container object and responds accordingly. Because it makes use of vector information to attract the digits and the panels of the countdown, there isn’t a change within the high quality of the displayed drawings when it will get resized. The device options round 30 choices to customise nevertheless it will also be utilized in a easy configuration.Devices
Basic Usage

1. With the intention to play, the device must execute on a div that’s comparatively or completely positioned, as a result of the device creates layers of canvas objects inside the div which are completely positioned. The div must have an id attribute in an effort to be simply chosen. The div might have width outlined with % values. Each resize of browser will get detected by the device and it’ll redraw accordingly. The peak of the div just isn’t essential, as a result of the device will change it in an effort to draw the countdown. There’s a parameter although that defines the utmost peak the device can have. Right here is an instance of a div object that can be utilized:

<div id="first_countdown" fashion="place: relative; width: 100%; peak: 50px;"></div>

2. After you’ve created the div ingredient you will have to import some Javascript recordsdata. These are jQuery, and the countdown plugin. In my demos, I add these within the header of the doc.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script sort="textual content/javascript" src="jquery.responsive_countdown.min.js"></script>

three. Lastly it’s essential choose the div ingredient and run the countdown. It’s doable to not specify any choices and the default ones shall be used.

<script>
 jQuery(doc).prepared(operate($)  
  $('#first_countdown').ResponsiveCountdown();
 );  
</script>


Features

  • Depend down / Depend up.
  • Responsive habits. The device scales in keeping with obtainable width.
  • Visible device that help you to create your distinctive countdown.
  • Infinite coloration combos. Strong coloration for the digits. Gradient coloration for the panels.
  • Present conceal teams.
  • Two perspective modes.
  • Two units of digits. Three units of panels.
  • Setting of time zone.
  • Setting of label captions.
  • Setting of labels font and dimension.
  • Teams spacing. Teams divider – circles or squares.
  • Utilization of time settings coming from a server. Synchronization takes place solely in the course of the initialization of the device.
  • Customized mode, that enables setting of the digits by the utilization of a public methodology.


Reviews

foomonkey

Important motive: Buyer Assist

Additional feedback from the client: If you’re searching for the perfect countdown, that is it! I examined eight totally different variations of this, bought and personal library. This was tremendous easy to put in and really straightforward to simply the way in which I wanted it. To prime it off I actually wanted a slight variation within the quantity colours and the developer responded inside an hour and supplied the revised code. chrisdean is a unbelievable writer 5 STARS. Thanks!

kryten68

Important motive: Design High quality

Additional feedback from the client: Excellent!

chillgeeksdesign

Important motive: Buyer Assist

Additional feedback from the client: Superior documentation with on the spot buyer help. I’d suggest this to everybody. Have used it in a cellular app, works like a allure !!

OneManOutfit

Important motive: Buyer Assist

Additional feedback from the client: The Finest Countdown counter on the market Thanks a lot


Changelog

UPDATE [18 MAR 2015] New choice added – f_weight. Concern repair in customized mode.

UPDATE [24 MAR 2014] Small subject eliminated regarding labels.

UPDATE [20 MAR 2014] Goal date reached occasion dealing with subject is eliminated.

UPDATE [11 MAR 2014] New function added – utilization of server time setting.
New function added – customized mode.
Higher dealing with of labels visualization.

UPDATE [13 FEB 2014] New function added – teams spacing.
New function added – teams divider (“none”, “squares”, “circles”).
Means to activate/off the glow impact behind labels.

UPDATE [10 FEB 2014] Minor bug mounted in index.html, regarding bgr_color.
A problem was mounted with full occasion dealing with.


DOWNLOAD

Check Also

screen_preview.jpg

Dictionary Pro Template with AdMob

DOWNLOAD Dictionary Professional is knowledgeable dictionary utility template. This template is appropriate for constructing dictionary ...

Flat – Responsive Pricing Tables

DOWNLOAD Pricing tables with responsive net design that solely use CSS and HTML. These pricing ...