Jump to content

Custom Counter not showing images

Recommended Posts

Hi All,

Using the code found on https://styleddigital.com/blog/2017/5/10/how-to-add-an-animated-counter-in-squarespace. It's edited to the below, but neither the icons nor the images are showing up. I'd prefer icons, but happy to settle with images (The second one has the image src tag within it)

The preview doesn't help, When published it shows the counter working flawlessly, but the icons and images simply don't show up. What am I missing to have them appear?

Code below (I don't know why it was removed without a reason before)


<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-2 counter-value" data-count="18" data-desc="Countries"><i style="opacity: 1;color:#3996cc" class="fa fa-globe-americas fa-1x"></i><br>0</div>
 <div class="sqs-col sqs-col-2 counter-value" data-count="41" data-desc="Cities"><img src="https://images.squarespace-cdn.com/content/5cd5a139a56827a74ecd921e/1563403026857-BN8OZY9NU2JJILQSIBS3/cities.png?content-type=image%2Fpng"><br>0</div>
 <div class="sqs-col sqs-col-2 counter-value" data-count="33" data-desc="Airports"><i style="opacity: 1;color:#3996cc" class="fa fa-plane-departure fa-1x"></i><br>0</div>
   <div class="sqs-col sqs-col-2 counter-value" data-count="200" data-desc="Brands"><i style="opacity: 1;color:#3996cc" class="fa fa-briefcase fa-1x"></i><br>0</div>
     <div class="sqs-col sqs-col-2 counter-value" data-count="1" data-desc="Billion in Construction"><i style="opacity: 1;color:#3996cc" class="fa fa-hard-hat fa-1x"></i><br>0</div>
       <div class="sqs-col sqs-col-2 counter-value" data-count="200" data-desc="Clients"><i style="opacity: 1;color:#3996cc" class="fa fa-handshake fa-1x"></i><br>0</div>
</div>


<style>
.counter-value { 
   font-size: 60px;
  line-height:2em;
  text-align:center;
  padding:17px 0;
  height: 150px;
}
 .counter-value:after {
  content: attr(data-desc);
   display:block;
   text-transform:uppercase;
   font-size: 14px;
   line-height:1.2em;
   height: 150px;  
 }
</style>


Link to comment
  • Replies 1
  • Views 665
  • Created
  • Last Reply

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.