pqina supports this item


This author's response time can be up to 2 business days.

74 comments found.

Hi @pqina – Any best-practice article or tutorial on how to properly use Soon in Angular? Will appreciate it if you can point me to a good article/tutorial or if you can write/create one ASAP.

@pqina – I came across a difficult hurdle with the “event-tick” and “event-complete” options. In AngularJS, it is valid or legal to have an attribute value in dotted notation. For example, I can use “vm.myFunction()” as the value for the attribute “ng-change”, where “vm.myFunction()” resides in an Angular Controller (not a public variable/function, but a.function that is declared as a “var” inside the Controller function).

My question is: Which function(s) or code in “Soon.js” needs to be modified to enable the correct handling of the function (in dotted notation) assigned to “event-tick” and “event-complete” attributes/options. Can you point me to the location of the function(s) and provide instructions and the code snippet(s) to effect the change in Soon.js?

I’m on a tight deadline, so any assistance sent this way will be much appreciated.

Hi, Can you contact me through the contact form on my profile page, that way we can use e-mail to communicate which is a bit easier than forum comments. :)

@pqina, I looked at the source code and found a temporary work-around for “event-complete”, but not for “event-tick”. I was a bit surprised to see they’re coded differently… Also, I hope you’ll add a set of functions to save the timer’s current state when there’s a need to temporarily pause the timer, and then resume where the user left off. I coded it myself, but it’d be nice if it’s already available as a library function.

For some reason I cannot debug, a call to the freeze() function doesn’t work on page reload. On first load, the freeze() call works, but when switching to another page, and then going back to the first page where I expect the call to the freeze() function to work, it does NOT freeze the timer (the progress visual continues to move). Any ideas why this happens?

Alright, that sounds exciting :)

Maybe this is of some help to you: Soon stores all counters in an array. Then with the getSoon methods counters can be retrieved by HTML element. My best guess would be that after page reload Angular has generated Soon with a new element and Soon can no longer find the original counter? Do other methods work (redraw / reset / setOption)? Use web inspector and set a custom property on the Soon counter element, then after switching pages, look if the property is still there, if not, it’s a new element. Of course this is guess work for me but I know how frustrating debugging these sort of things can be so hope it’s of help to you.

@pqina – thanks for the feedback/input. Yes, all the other methods work. When the page is [re]loaded, I actually create an instance of the Soon element on DOM ready (if it does not exist), reset the timer’s time, and call freeze(). But this freeze() call doesn’t seem to take effect on a page REload as I described… Anyway, I’ll check out the Soon code to see if I can make any adjustments to make it work.

Alright, good luck!

can this countdown to the bottom of the hour? So use the server time and have it reset every hour?

It would count down from the start of the 25th of February to 1 hour later so unless it’s 00:00 at your location the counter will show 0.

Removing the data-now property will have it countdown 1 hour starting from page load.

I dont want the counter to countdown when the page loads. I want the counter to show how much is left in this hour. If its 8:45am then the counter will show 15 minutes. Then when the hour ends the counter goes back to 59 minutes and start over again until the end of that hour. Is this possible? thanks for your help on this.

Ah, I get it now. See the code snippet below, that should do the trick.

<div class="counter" />

<!-- Make sure you have loaded the soon script before running the script below -->



  // function to add zeros in front of singular values
  function pad(value){return ('00' + value).slice(-2)};

  // get the current time and set it to the next whole hour
  var now = new Date();
  now.setHours(now.getHours() + Math.ceil((now.getMinutes() + 1) / 60));
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var date = now.getDate();
  var dueISO = year + '-' + pad(month) + '-' + pad(date) + 'T' + pad(now.getHours()) + ':00';

  // get the counter and create a soon counter
  var counter = document.querySelector('.counter');
        'due':'in 1 hour'




Is there a way to get the countdown to work to a time as well rather than just the day – i want to do to 10am on a particular day.

Please help me.

Thanks ismail

Yes you can, no problem. :)

As you can see in the docs (http://rikschennink.nl/products/soon/docs.html#topic-quick-setup-setting-a-date): 2016-11-25T22:10 counts to a specific time.

You can also use the Visual Builder to select a specific time on a specific date.

It works!

Thank you very much.

How i can add the Soon Countdown in my Joomla website in Russian lang.? Maybe I can add with joomla HTML modul? If it is possible to insert a Soon Countdown into my joomla website, I’ll buy it. thanks for your answer.


You can set the labels using the attributes defined on the following page: http://rikschennink.nl/products/soon/docs.html#topic-setting-the-counter-format-label-names

I think something like this should work for adding the custom HTML. http://extensions.joomla.org/extension/custom-html-advanced

Help me to paste the code into my site. What are the files in the folders I need to add? I generated snippet inserted in the module, but only seen the name. Please help me. http://screenshot.ru/e7122049eeb281dc2c7c52c165e0a5dd http://screenshot.ru/036e3fb672f6e0a3e8775993c5c635fc

Hi! You need to add the soon.min.css and soon.min.js files to your Joomla site. The bottom two fields in your screenshot I think can be used just for that purpose. I don’t know where those files should be uploaded that depends on your Joomla install I think.

Just a heads up on a problem I had trying to get this to work with in Laravel…

I couldnt get it to work at all and got a little frustrated with it until I changed…


<script src=”/js/soon.min.js” data-auto=”false”></script>

to this

<script src=”/js/soon.min.js”></script>

Hi! Thanks for posting this solution. When data-auto is set to false the script will not automatically load counters on the page. View the page below for more information: http://rikschennink.nl/products/soon/docs.html#topic-linking-to-other-functionality-kickstart

Welcome! Hmm It would seem all of the demos has this on because none of them would load for me.

Odd, I’ll see if I can reproduce the issue. Glad it’s working now.

Hi. I’m initializing the Soon with Create method. Those are my property:

    'due'               :'2016-10-31T12:00:00',
    'layout'            :'group',
    'scaleMax'          :'fill',
    'format'            :'d,h,m,s',
    'face'              :'slot roll left fast',
    'visual'            :'ring invert ring-width-custom align-center length-100',
    'labelsDays'        :'dni,dni',
    'labelsHours'       :'ur,ur',
    'labelsMinutes'     :'minut,minut',
    'labelsSeconds'     :'sekund,sekund'

I’m using fill mode but on the element the attribute is set like that data-scale-max=”fill” data-scale=”l”. Why is data-scale even set? I’m testing the Visual builder and there is no data-scale when setting fill mode. Also if I compere to VB the font-size isn’t added as attribute on my example.

Thanks for help!

Hi! data-scale is set by Soon itself, it will determine the current scale based on the available space. The attribute is then used by the CSS to determine font sizes etc.


rogerad Purchased

hi i just purchased soon. i am creating a wordpress plugin i i tried inserting the example into the html code that i was using nothing happened i am not using jquery the html file is being created in php

this is what inserted i also added the min .css statement and min.js statement as in instructions for installation

<!- due date set ->

<script> $(document).ready(function() { </script>

// create a simple soon counter on the supplied element
// create a more advanced counter
    layout:"group tight",
    face:"flip color-light corners-sharp shadow-soft",
    eventComplete:function(){ alert("done!"); }

what do i have to add to make it work in php and html code


Adding CSS and JS files should be enough. Soon will then automatically pick up HTML DIV tags with the soon class.

Please use the support tab for further support. It’s easier to communicate via e-mail. Thanks! :-)


rogerad Purchased

everythng works – i copied js and css paths incorrectly

if someone else has same problem – check your js and css path and copy basic example – you have to modify it a bit to work i used

<link rel="stylesheet" href="<?php echo plugins_url('aclock\bin\css\soon.min.css', dirname(FILE)); ?>" type="text/css">

and it works not

<link href=”css/soon.min.css” rel=”stylesheet”>

maybe it was my typing

Glad to hear it’s working! :-)


dailce Purchased

You state in the docs “If you are using a module loader it’s adviced to use the soon.module.js file. This version of Soon does not contain the kickstart feature….”

How do I use this version of the plugin. I can’t seem to get the normal plugin to work on safari.

Hi, my guess would be the problem originates from the fact that the date is not in ISO 8601 format. 2016-12-1 should be 2016-12-01. Does that solve the issue?


dailce Purchased

You the man! Works.

Fantastic! :)

Hi, can i use in a wordpress theme that sell on themeforest if buy extended license?

Hi! Yes you can, please read this entry in the FAQ for more details:


I there, nice pluggin. I don´t now what i did wrong, but my counter doesn’t updates, when the days pass by, always sows same values. Think you can help me www.wasabi.es

Hi, You’ve set the now property to a fixed value which will always result in the same count down amount, if you remove this line all will be fixed:


@pqina – It is only displaying the first unit of the format. If I keep d,h,m,s. It shows only the date. if I keep w,d,h,m,s it shows only week. Unsure what is going wrong.

Hi! That’s odd :-) Can you post the whole snippet? (template plus counter JavaScript)

Hello, is it posible to use this countdown on HTML5 banners?

I don’t think the CodeCanyon licenses cover use on HTML5 banners/ads (if they are used on different domains). Best to contact Envato support and ask to be sure before purchasing.

Can the setOption be used to set both due and now ?


pqina Author

Hi, you can use Soon.setOptions(element,{'due':'2017','now':'2016'}) to set multiple properties simultaneously.