Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Animated Counter - need help to add a comma!

    We're using this code snippet from https://styleddigital.com/blog/2017/...in-squarespace to add an animated counter to our non-profit website https://www.explorersconnect.com however we need to add a comma so instead of 232223 it will display 232,223.

    Not sure if this is an easy option but can anyone help?

    Thank you!

  2. #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    TX
    Posts
    3,910
    Thanks
    64
    Thanked 600 Times in 594 Posts

    Lightbulb

    Simple function modification.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> HTML5 page </title>
    </head>
    <body>
    <pre id="debug"></pre>
    
    <script>
    function strUnits(str) {
      return str.replace(/\B(?=(\d{3})+\b)/g, ",");
    }
    
    document.getElementById('debug').innerHTML += strUnits('123456')+'<br>';
    document.getElementById('debug').innerHTML += strUnits('232223')+'<p>';
    document.getElementById('debug').innerHTML += strUnits('1234567')+'<br>';
    document.getElementById('debug').innerHTML += strUnits('2322237')+'<p>';
    document.getElementById('debug').innerHTML += strUnits('12345678')+'<br>';
    document.getElementById('debug').innerHTML += strUnits('23222378')+'<p>';
    document.getElementById('debug').innerHTML += strUnits('123456789')+'<br>';
    document.getElementById('debug').innerHTML += strUnits('232223789')+'<p>';
    
    </script>
    
    </body>
    </html>
    Good Luck!

  3. Users who have thanked jmrker for this post:

    simonp820 (Jun 12th, 2018)

  4. #3
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,013
    Thanks
    3
    Thanked 430 Times in 419 Posts
    @jmerker, stop brute forcing stuff that exists.

    Basically in the step fuinction swap this:

    Code:
    $this.text(Math.floor(this.countNum));
    for this:

    Code:
    $this.text(Math.floor(this.countNum).toLocaleString("en-US"));
    and in the complete function change out this:

    Code:
    $this.text(this.countNum);
    for this:

    Code:
    $this.text(this.countNum.toLocaleString("en-US"));
    Assuming you want to force comma thousands separators. You may want to consider losing the en-US string and just saying toLocaleString() in there, which will give the comma separator and/or numbering system specific to the language the user's browser is set to. That way countries who use periods instead of comma's will get them.

    JavaScript is one of those strange languages where a LOT of times "Yeah, there's an existing function for that".

    https://developer.mozilla.org/en-US/...toLocaleString
    Last edited by deathshadow; Jun 12th, 2018 at 05:46 PM.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  5. Users who have thanked deathshadow for this post:

    simonp820 (Jun 12th, 2018)

  6. #4
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you both so much! deathshadow - that worked a treat. Cheers!


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •