Jump to content

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

Recommended Posts

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
  • Replies 8
  • Views 2.7k
  • Created
  • Last Reply

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?

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

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?

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

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. 

 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

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?

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

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

 

 

 

 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

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.