Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 17, 2015 at 5:08 pm #489023
    philthebass

    Hi,

    I’m trying to add a custom javascript that will do a price “countdown”. I’ll be using this one

    https://inorganik.github.io/countUp.js/

    What’s the best way to implement this on a page?

    With thanks

    Phil

    August 17, 2015 at 8:18 pm #489104
    Elliott

    Hey philthebass!

    Add this to a codeblock element in the page.

    <script type = "text/javascript">
var options = {
  useEasing : true, 
  useGrouping : true, 
  separator : ',', 
  decimal : '.', 
  prefix : '', 
  suffix : '' 
};
var demo = new CountUp("myTargetElement", 0, 2451, 0, 2.5, options);
demo.start();
</script>
<span id = "myTargetElement"></span>

    And then make sure to download the JS file and link it to it in your header.

    We already have a animated numbers shortcode though, http://kriesi.at/themes/enfold/shortcodes/animated-number/.

    Cheers!
    Elliott

    August 17, 2015 at 8:41 pm #489118
    philthebass

    Thanks Elliott,

    I’ll give that a try.

    I’ve used the animated number shortcode before, but I need something that will go from a high to low number to illustrate a price drop/reduction.

    Thanks

    Phil

    August 17, 2015 at 8:49 pm #489122
    philthebass

    Hi Elliott,

    I’m having trouble getting it to display. I have added the link to the JS in the header like this

    <script type="text/javascript" src="https://www.rubberduckdigital.com/dist/countUp.js"></script>

    and added the text block as suggested, but no joy.

    Thanks

    Phil

    August 18, 2015 at 3:14 pm #489534
    Elliott

    Hi!

    Is rubberduckdigital your site? It’s under a maintenance mode plugin it looks like.

    Cheers!
    Elliott

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.