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

Jquery Counter-Up plugin Scrolling Problem (7.1)


spondon

Question

  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

Hi, The actual code is wrong. Need to change the JS function. Please let me know if you want to change it completely. Please use the like button if it helps you! Best, Leopold

Sorry! Try this code. In your Code Block <div class="container"> <div class="row"> <div class="col-md-4"> <h1><span class="counter">2,523</span><

Posted Images

7 answers to this question

Recommended Posts

  • 0

Hi,

Insert this code in the HTML code block.

<div id="countdown"></div>

And insert this code in your Footer Code Injection.

<script>
var end = new Date('09/07/2020 10:1 AM'); /* Change it to the date that you like! */

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById('countdown').innerHTML = days + 'days ';
        document.getElementById('countdown').innerHTML += hours + 'hrs ';
        document.getElementById('countdown').innerHTML += minutes + 'mins ';
        document.getElementById('countdown').innerHTML += seconds + 'secs';
    }

    timer = setInterval(showRemaining, 1000);
</script>

 

Please use the like button if it helps you!

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to post
  • 0

Sorry! Try this code. In your Code Block

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <h1><span class="counter">2,523</span></h1>
      <h3>Customers</h3>
      <i class="fa fa-users"></i>
    </div>
    <div class="col-md-4">
      <h1><span class="counter">63,075</span></h1>
      <h3>Total Web Pages</h3>
      <i class="fa fa-desktop"></i>
    </div>
    <div class="col-md-4">
      <h1><span class="counter">12,218</span></h1>
      <h3>Cups Of Coffee</h3>
      <i class="fa fa-coffee"></i>
    </div>
  </div>
</div>

Insert this code in Design -> Custom CSS


.col-md-4 {
  text-align: center;
  padding-bottom: 50px;
  border-right: 1px dashed black;
}

.col-md-4:last-child {
  border-right: 0px solid black;
}

.counter {
  animation-duration: 1s;
  animation-delay: 0s;
}

i {
  font-size: 20px !Important;
}

@media (max-width: 991px) {
  .col-md-4 {
    border-right: 0px dashed black;
    border-bottom: 1px dashed black;
    width: 50%;
    margin: auto auto;
  }
  
  .col-md-4:last-child {
    border-bottom: 0px dashed black;
  }
}

Insert this code in your Footer Code Injection.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.counter').counterUp({
  delay: 10,
  time: 2000
});
$('.counter').addClass('animated fadeInDownBig');
$('h3').addClass('animated fadeIn');
});
</script>

 

Please use the like button if it helps you!

Best,
Leopold

 

Edited by IXStudio

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

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