Aleš Sýkora wrote

Oxygen’s Number Counter tricks – Dynamic data, speed and more

14. 7. 2021 in ,

All tips should be working for both Number Counter composite element and Circle Number Counter composite element in Oxygen Builder for WordPress.

Using Dynamic Data in Number Counter

Using the Number Counter from Oxygen Builder’s composite elements is cool until you need to use the dynamic data. When you add dynamic data source, span is created over the number and counter stop working.

Span is created inside the number text with dynamic data source

What to do to make the dynamic number working?

No big things! Just delete CSS class called “.oxel_number_counter__number” from element named Number and use it on the SPAN inside. Voilà – you are done.

Add class for number into span of Dynamic Content

Set custom speed for each number

Click on element which contains your number and go to Advanced -> Attributes -> Add Attribute with name “speed” and value to whatever speed you want. Higher speed attribute = slower counter.

Setting custom attribute for number

Do this for each counter’s number. Then go to the Number Counter’s Code Block -> JavaScript and change

Change:
var counterSpeed = 50;
to:
var counterSpeed = number.attr("speed");
Change Counter Speed to attribute speed

PLEASE Use only one code block for all counters on page

If you use more than one Number Counter on page, delete the code block which all of them create. Just left 1 there. It is enough.

You need only one Counter Code for a page.

Change the number of decimals

If you want your counter to count and increment the decimals and display two decimal places:

Change
currentCount++;
to
currentCount+=0.01; // increment by .01
Change
number.text(currentCount);
to
number.text(currentCount.toFixed(2));  // show number with 2 decimal places

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
Use global colours from Oxygen Builder in CSS
You have defined your Global colors in Oxygen Builder and now you need use them in CSS styles? No Problem! You can use your global colors within CSS styles. Just open Settings > Global Styles > Colors, click on your colour group and you will see your colors with assigned ID’s to each of them. […]
Read More
Aleš Sýkora wrote
Disable scrolling in Iframe when scrolling page
23. 11. 2020 in
Disable scroll until you click into iframe.
Read More
Aleš Sýkora wrote
Auto-populate child content with parent content’s title
11. 7. 2019 in
Code snippet from our fan.
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram