Jquery Counter-Up plugin Scrolling Problem (7.1)

Site URL: https://star.squarespace.com/

P.W.-  11111A

1. When I scrolling top to bottom The value always changed (down).

💥 I want to Count once, when reload and visit this individual Sections. 

Thanks. 

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

Yes I want to change.

I need Your help. @IXStudio

Please share code here or my site.

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

Unfortunately, you send me countdown JS. and actually my Problem is all about a Jquery Counter Plugin. @IXStudio

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

Sorry to say, It's not working.

If you have enough time, please check my site.

Please contact me via DM.

Please use the like button if it helps you!

Best,
Leopold