Jump to content
  • 0

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>
Link to comment
  • Answers 8
  • Created
  • Last Reply

8 answers to this question

Recommended Posts

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?

Improve your online store with our extensions.
About: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of SF Digital, dedicated to improving websites by building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment

@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>

 

Link to comment

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. 

 

If you're looking for a Squarespace Developer, drop me a line. 

Link to comment

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?

If you're looking for a Squarespace Developer, drop me a line. 

Link to comment

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;
  }
});
});

 

 

 

 

If you're looking for a Squarespace Developer, drop me a line. 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.