Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
TashaDobie

How do I edit this code to automatically update my counter data value every day?

Question

Hi There, 
 
I am new to html and would love some help to update my counter data value automatically with every passing day. 
<div id="counter">
  <div class="sqs-col sqs-col-4 counter-value" data-count="200" data-desc=" tonnes of co2 pollution saved">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="700000" data-desc="less bottles polluting our planet">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="3567052" data-desc="litres of iXi Water sold">0</div>
</div>

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 0

You will need some sort of script that can calculate the number of elapsed days since whatever your start date is and then calculate each variable. 

It looks to me like that is already structured for an existing script. Where did you get it from?


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

I'm guessing it came from here: https://styleddigital.com/blog/2017/5/10/how-to-add-an-animated-counter-in-squarespace

The script could be modified to have changing values instead of fixed ones, but the changes will depend on the facts. For example, how many fewer bottles are polluting the planet every minute/hour/day?

Edited by paul2009

If a response has helped you, please give thanks using the  like-20-mag.png.3997345d620e40b4760b5d7a667cad54.png button.
Need personalised help? I'm a professional Developer who works with Designers internationally. You can book me via my company's website. www.sf.digital

Share this post


Link to post
  • 0

@paul2009 This is the exact code that I have: However, I need to edit it to make it update automatically with each passing day. 

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var a = 0;
$(window).scroll(function() {

  var oTop = $('#counter').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },
        {
          duration: 2000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
          }
        });
    });
    a = 1;
  }
});
</script>
<div id="counter">
    <div class="sqs-col sqs-col-4 counter-value" data-count="200" data-desc=" tonnes of co2 pollution saved">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="700000" data-desc="less bottles polluting our planet">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="3567052" data-desc="litres of iXi Water sold">0</div>
</div>


<style>
 .counter-value { 
    font-size: 50px;
   line-height:1.4em;
   text-align:center;
   padding:18px 0;
 }
  .counter-value:after {
   content: attr(data-desc);
    display:block;
    text-transform:uppercase;
    font-size: 20px;
    line-height:1.3em;
  }
</style>

 

Share this post


Link to post
  • 0

The script isn't really suitable for what you want. It just counts up to whatever the data count is over a short period of time. 

It would be possible to add a routine to look at a global start date  and a daily increment value for each entry ( none are supported in your code example) and then adjust the dataq-count variable prior to running the original script. 

 


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

The first step would be to get all of the information you need into the html part. 

<div id="counter" data-startdate="31/12/2010">
  <div class="sqs-col sqs-col-4 counter-value" data-dailyincrement="50" data-count="200" data-desc=" tonnes of co2 pollution saved">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-dailyincrement="100" data-count="700000" data-desc="less bottles polluting our planet">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-dailyincrement="500" data-count="3567052" data-desc="litres of iXi Water sold">0</div>
</div>

In the example above we have

  • An overall start date in the wrapping #counter div.
  • A new dailyincrement variable where you store the amount the total should rise in each elapsed day
  • The data-count variable is still there. It could start from zero or you could give a starting value (what the value was on start date)

Is this the sort of behaviour you would want?


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

Ok. I think I have a solution. 

NB. This code counts partial days, so the numbers will rise during the day. 

Use this as your html. Note that the start date is in MM/DD/YYYY format. 

<div id="counter" data-startdate="10/13/2019">
  <div class="sqs-col sqs-col-4 counter-value" data-dailyincrement="50" data-count="200" data-desc=" tonnes of co2 pollution saved">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-dailyincrement="1" data-count="1" data-desc="less bottles polluting our planet">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-dailyincrement="1" data-count="10" data-desc="litres of iXi Water sold">0</div>
</div>

I've set a recent start date and small numbers for data-count and data-dailyincrement to make testing easier. 

Then insert this into your custom css area, after any other code that may already be there. 

 .counter-value { 
    font-size: 50px;
   line-height:1.4em;
   text-align:center;
   padding:18px 0;
 }
  .counter-value:after {
   content: attr(data-desc);
    display:block;
    text-transform:uppercase;
    font-size: 20px;
    line-height:1.3em;
  }

Insert this into your header injection point

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

And finally, insert this into your footer injection point

window.Squarespace.onInitialize(Y, function(){
var a = 0;
var dateNow = new Date();
var startDate = new Date($('#counter').attr('data-startdate'));
var daysSince = (dateNow.getTime() - startDate.getTime())/ (1000 * 3600 * 24);
$('.counter-value').each(function() { 
  var thisIncrement = $(this).attr('data-dailyincrement');
  var newTotal = (thisIncrement * daysSince) + $(this).attr('data-count');
  $(this).attr('data-count', Math.floor(newTotal));
  // console.log(newTotal);
});



$(window).scroll(function() {
  var oTop = $('#counter').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },
        {
          duration: 2000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
          }
        });
    });
    a = 1;
  }
});
});

 

 

 

 

Edited by colin.irwin

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...