[CarpaintcustomsParticipant]

hi. Can you tell me how to make the numbers count down instead of up? this is the up way….. [counter num_start=”1″ num_end=”10″ num_color=”#000000″ num_speed=”10000″

I tried typing in the numbers starting high and then going to a lower number already but it didn’t work

thanks!

[Paul RModerator]

Hi,

You can add a unique class to your counter for example countdown-counter

http://screencast.com/t/vRAzaBLNAmUO

You can then add this under Custom > Javascripts in the Customizer.

jQuery(function($) {

var numEnd   = $('.countdown-counter').data('num-end');
var numSpeed = $('.countdown-counter').data('num-speed');

$('.countdown-counter')
  .prop('number', numEnd   )
  .animateNumber(
    {
      number: 0,
      numberStep: function(now, tween) {
        var target = $(tween.elem),
            rounded_now = Math.round(now);

        target.text(now === tween.end ? '0' : rounded_now);
      }
    },
    numSpeed,
    'linear'
  );

});

Where numEnd will be the starting point.

Hope that helps

[CarpaintcustomsParticipant]

hmmm so I pasted that script in the custom JavaScript section. What do I do now? I see no changes. thanks

[ZeshanMember]

Hi there,

As mentioned above, after adding the script under JavaScript section, you need to add a class of countdown-counter to your [counter] shortcode (see: http://prntscr.com/539hib) and you need to add starting number in Ending Number field and ending number in Starting Number field (see: http://prntscr.com/539htd). And the shortcode will be something similar to:

[counter num_start="10" num_end="1" num_color="#000000" num_speed="10000" class="countdown-counter"]

Cheers!

[CarpaintcustomsParticipant]

right but where is this counter section located (http://prntscr.com/539hib)? Is it under pugins? I don’t see that feature anywhere

thanks

[ZeshanMember]

Hi there,

If you’re using Visual Composer, you can simply click on Edit of counter shortcode (see: http://prntscr.com/53ll2i). After that a window will appear. Just scroll down and you’ll a Class field.

Screencast: http://screencast.com/t/tWHV5C5u4sA

Thanks!

[Boyd TParticipant]

This makes the numbers count backwards, but it loses all of the other CSS that was applied. I am not getting the above and below text or anything else.

Example: http://vibranthealthevents.com

at the bottom is the counter that counts from 199 – 99 just fine but has no CSS.

Example: http://vibranthealthevents.com/product/early-bird-conference-tickets/
This is how it should look, except countdown, the only difference is the added class from the countdown-counter.

This is what I have on the top link:
[counter num_start="0" num_end="199" num_prefix="$" num_suffix="" num_speed="2000" num_color="#28aae1" text_above="Room Rate" text_below="per night" text_color="#000000" class="countdown-counter x-counter"]

This is the code for the bottom link:
[counter num_start="0" num_end="99" num_prefix="$" num_suffix="" num_speed="2000" num_color="#28aae1" text_above="Room Rate" text_below="per night" text_color="#000000"]

[RadModerator]

Hi there,

How about this one,

jQuery(function($) {

var numEnd   = $('.countdown-counter').data('num-end');
var numSpeed = $('.countdown-counter').data('num-speed');

$('.countdown-counter')
  .prop('number', numEnd   )
  .animateNumber(
    {
      number: 0,
      numberStep: function(now, tween) {
        var target = $(tween.elem),
            rounded_now = Math.round(now);

        $(target).find('span.number').text(now === tween.end ? '0' : rounded_now);
      }
    },
    numSpeed,
    'linear'
  );

});

Thanks!

[Boyd TParticipant]

The formatting is back (good), but the countdown functionality is gone. It is counting up instead of down.

Let me add a bit more…

It appears that it is not targeting the correct item because if I change the hard coded values in the function, they are not updating on the site. The only line that changed was the one starting with $(target

That new line is somehow not targeting the counter anymore.

[Paul RModerator]

Hi Boyd,

Sorry about that, can you try the code below instead.

jQuery(function($) {

var numEnd   = $('.x-counter.countdown-counter').data('num-end');
var numSpeed = $('.x-counter.countdown-counter').data('num-speed');

$('.x-counter.countdown-counter')
  .prop('number', numEnd   )
  .animateNumber(
    {
      number: 0,
      numberStep: function(now, tween) {
        var target = $(tween.elem),
            rounded_now = Math.round(now);

        target.find('span.number').text(now === tween.end ? '0' : rounded_now);
      }
    },
    numSpeed,
    'linear'
  );

});

Hope that helps. 🙂

[Boyd TParticipant]

This is what I currently have on the site and it is counting up and not down. Maybe I have an issue on my end, please let me know if this is correct.

jQuery(function($) {

var numEnd   = $('.x-counter.countdown-counter').data('num-end');
var numSpeed = $('.x-counter.countdown-counter').data('num-speed');

$('.x-counter.countdown-counter')
  .prop('number', numEnd   )
  .animateNumber(
    {
      number: 99,
      numberStep: function(now, tween) {
        var target = $(tween.elem),
            rounded_now = Math.round(now);

        target.find('span.number').text(now === tween.end ? '99' : rounded_now);
      }
    },
    numSpeed,
    'linear'
  );

});

That is in the customize > Custom > Javascript

Then on the page I want it to display on, I have:
[counter num_start="" num_end="199" num_prefix="$" num_suffix="" num_speed="2000" num_color="#28aae1" text_above="Room Rate" text_below="per night" text_color="#000000" class="countdown-counter"]

I want the numbers to go from 199 down to 99 and it works great if I use the code that you supplied on 11/4/14 at the top of this post but it just doesn’t have any of the normal styling. The other examples you have given with different JS make the counter count up instead of down.

[ChristianModerator]

Hey Boyd,

Sorry for the confusion on this. We’d love to help with this however, our shortcode supports simple animation only (see http://aishek.github.io/jquery-animateNumber/). To implement reverse countdown, you need to modify or copy and modify a combination of JavaScript and Shortcode functions. With that said, this falls outside the scope of our support.

But, we’ll take note of this as feature request and might implement it in a future release.

Thanks.

[Author]

Posts