{"id":81184,"date":"2025-06-12T19:56:11","date_gmt":"2025-06-12T19:56:11","guid":{"rendered":"https:\/\/mailinvest.blog\/index.php\/2025\/06\/12\/jquery-responsive-countdown-with-visual-builder\/"},"modified":"2025-06-12T19:57:14","modified_gmt":"2025-06-12T19:57:14","slug":"jquery-responsive-countdown-with-visual-builder","status":"publish","type":"post","link":"https:\/\/mailinvest.blog\/index.php\/2025\/06\/12\/jquery-responsive-countdown-with-visual-builder\/","title":{"rendered":"jQuery Responsive Countdown with Visual Builder"},"content":{"rendered":"<\/a>\n<\/p>\n

LIVE PREVIEW<\/a>BUY FOR $6<\/a><\/p>\n

<\/p>\n

\"WP<\/a>\n<\/p>\n

\"Demo1\"
\"Description\"<\/p>\n

It is a javascript primarily based software that makes use of the canvas object to animate SVG outlined drawings. The software makes use of a flip animation to show the remaining time to<\/strong> or the elapsed time from<\/strong> a goal date. The software 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 software options round 30 choices to customise nevertheless it will also be utilized in a easy configuration.\"Devices\"\"\"
\n\"Basic<\/p>\n

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

\n<div id=\"first_countdown\" model=\"place: relative; width: 100%; peak: 50px;\"><\/div>\n<\/pre>\n
2. After you’ve gotten 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.<\/p>\n
\n<script src=\"http:\/\/code.jquery.com\/jquery-1.9.1.js\"><\/script>\n<script sort=\"textual content\/javascript\" src=\"jquery.responsive_countdown.min.js\"><\/script>\n<\/pre>\n
3. Lastly you must choose the div ingredient and run the countdown. It’s doable to not specify any choices and the default ones will probably be used.<\/p>\n
\n<script>\n jQuery(doc).prepared(perform($){  \n  $('#first_countdown').ResponsiveCountdown();\n });  \n<\/script>\n<\/pre>\n
\"\"
\n\"Features\"<\/p>\n
    \n
  • Depend down \/ Depend up.<\/li>\n
  • Responsive conduct. The software scales in keeping with accessible width.<\/li>\n
  • Visible software that help you to create your distinctive countdown.<\/li>\n
  • Infinite shade mixtures. Strong shade for the digits. Gradient shade for the panels.<\/li>\n
  • Present disguise teams.<\/li>\n
  • Two perspective modes.<\/li>\n
  • Two units of digits. Three units of panels.<\/li>\n
  • Setting of time zone.<\/li>\n
  • Setting of label captions.<\/li>\n
  • Setting of labels font and dimension.<\/li>\n
  • Teams spacing. Teams divider – circles or squares.<\/li>\n
  • Utilization of time settings coming from a server. Synchronization takes place solely in the course of the initialization of the software.<\/li>\n
  • Customized mode, that permits setting of the digits by the utilization of a public methodology.<\/li>\n<\/ul>\n
    \"\"
    \n\"Reviews\"<\/p>\n
    foomonkey<\/h5>\n
    Foremost purpose:<\/strong> Buyer Help
    \n
    Further feedback from the customer:<\/strong> In case you are on the lookout for the most effective countdown, that is it! I examined 8 totally different variations of this, bought and personal library. This was tremendous easy to put in and really straightforward to model simply the best way 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 improbable creator 5 STARS. Thanks!<\/p>\n
    kryten68<\/h5>\n
    Foremost purpose:<\/strong> Design High quality
    \n
    Further feedback from the customer:<\/strong> Very good!<\/p>\n
    chillgeeksdesign<\/h5>\n
    Foremost purpose:<\/strong> Buyer Help
    \n
    Further feedback from the customer:<\/strong> Superior documentation with instantaneous buyer assist. I’d advocate this to everybody. Have used it in a cellular app, works like a attraction !!<\/p>\n
    OneManOutfit<\/h5>\n
    Foremost purpose:<\/strong> Buyer Help
    \n
    Further feedback from the customer:<\/strong> The Greatest Countdown counter on the market Thanks a lot<\/p>\n
    \"\"
    \n\"Changelog\"<\/p>\n
    UPDATE <\/strong> [18 MAR 2015]\nNew possibility added – f_weight. Concern repair in customized mode.<\/p>\n
    UPDATE <\/strong> [24 MAR 2014]\nSmall problem eliminated regarding labels.<\/p>\n
    UPDATE <\/strong> [20 MAR 2014]\nGoal date reached occasion dealing with problem is eliminated.<\/p>\n
    UPDATE <\/strong> [11 MAR 2014]\nNew characteristic added – utilization of server time setting.
    \nNew characteristic added – customized mode.
    \nHigher dealing with of labels visualization.<\/p>\n
    UPDATE <\/strong> [13 FEB 2014]\nNew characteristic added – teams spacing.
    \nNew characteristic added – teams divider (“none”, “squares”, “circles”).
    \nCapacity to activate\/off the glow impact behind labels.<\/p>\n
    UPDATE <\/strong> [10 FEB 2014]\nMinor bug mounted in index.html, regarding bgr_color.
    \nA difficulty was mounted with full occasion dealing with.<\/p>\n
    \n