Kim San
Reputation: 815
Counter up function stop when scroll and show error
I'm receiving this error every time I scroll towards my counter up function -> "Uncaught TypeError: Cannot read property 'shift' of null at f (jquery.counterup.js:62)". Any idea how to fix it ?
Here's the code:
$('.counter').counterUp({
delay: 10,
time: 2000
});
$('.counter').addClass('animated fadeInDownBig');<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/solid.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>Upvotes: 4
Views: 927
Answers (1)
Frenchy
Reputation: 17007
I have upgraded the version of counterUp and no problem: instead version 1.0.0, use the 2.1.0.
<script src="https://unpkg.com/[email protected]/jquery.counterup.js"></script>
$('.counter').counterUp({
delay: 10,
time: 2000
});
$('.counter').addClass('animated fadeInDownBig');<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/solid.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/jquery.counterup.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>Upvotes: 3
Related Questions
- Counter Observe when I scroll
- Start counting after scroll on specific element
- jQuery Counter does not go up
- when i scroll page then javascript problem is Count Up
- I can't integrate a simple on scroll trigger for my JS counter
- Javascript Counters starts on scroll
- Make jquery counter start on scroll
- Jquery counter on scroll
- Counter stop out of the window browser
- jQuery Counter Begins to Increment on Scroll but Won't Stop at Max Value