Rotate numbers before and after decimal point in Counter element

Support
#1

Hi team,

Similar to this thread https://theme.co/apex/forum/t/add-commas-and-dollar-signs-to-counter/17735 I would like to rotate the numbers before and after a decimal point using the counter element. See screenshot below:

If you need to see the page, you can access it at: https://newafibpatients.heartfailurehelp.org/

Please let me know the best way forward. It looks like there are working Javascript solutions, however, I was unfortunately unable to create a solution myself.

Thanks for you help!

#2

Hi @podii,

Thank you for reaching out to us. The counter element doesn’t support the decimal numbers at the moment, it might be possible to animate both numbers with custom development but this would be outside the scope of support as it requires the element level changes along with JavaScript.

You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

#3

Hello,

Please look at the linked thread. It looks like your team gave a solution to a user with the same problem. I think the solution here https://theme.co/apex/forum/t/add-commas-and-dollar-signs-to-counter/17735 was to add the period/comma in with JS.

Can you please provide a snippet similar to what was posted here https://theme.co/apex/forum/t/add-commas-and-dollar-signs-to-counter/17735

Thanks!

#4

Hey @podii,

Adding a comma is easy because the number used in the counter element is the whole number and not the decimal number so by using mathematics we can add the comma to it’s actual position on the fly using JavaScript but your case is totally different. You’ve a decimal number and you want to animate both, since the counter element doesn’t support the decimals so it’s not achievable using only JavaScript.

We can understand this with a simple example, let’s say we have added the animation from 0 to 1001 so using mathematical calculations we can insert the comma right after 1 so it will become 1,001 but that’s not the case with the decimal numbers, you cannot calculate the position of the decimal, it could be 100.1 or 10.01 or 1.001 so it’s not basically achievable with custom JS only, this definetly requires the element level change to support the decimal numbers for the animation.

However we’ve a thread that covers adding the commas in details, if you’re interested then you can get help from this thread: https://theme.co/apex/forum/t/adding-commas-to-counter-numbers/46205/2

Please note that the code provided in the thread serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.development

Thank you for understanding!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.