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

Custom Counter not showing images


bsmtech

Question

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>


Edited by bsmtech
Code was removed before with no reason, added again.
Link to post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

1 answer to this question

Recommended Posts

Create an account or sign in to comment

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


×
×
  • Create New...