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

thanks!

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

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!

thanks

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!

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"]

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!

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.

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. 🙂