I noticed a strange issue with the counters on my website. They count up as expected when the page loads, but for some reason, when the screen width shrinks below 800px, they don't start automatically. However, if I quickly scroll to where the counters are located on the site, they do start counting. The counters also work fine in fullscreen mode and on mobile devices.
Below is the jQuery code snippet that I have been using:
if (jQuery('.shortcode_counter').size() > 0) {
if (jQuery(window).width() > 760) {
jQuery('.shortcode_counter').each(function(){
if (jQuery(this).offset().top < jQuery(window).height()) {
if (!jQuery(this).hasClass('done')) {
var set_count = jQuery(this).find('.stat_count').attr('data-count');
jQuery(this).find('.stat_temp').stop().animate({width: set_count}, {duration: 3000, step: function(now) {
var data = Math.floor(now);
jQuery(this).parents('.counter_wrapper').find('.stat_count').html(data);
}
});
jQuery(this).addClass('done');
jQuery(this).find('.stat_count');
}
} else {
jQuery(this).waypoint(function(){
if (!jQuery(this).hasClass('done')) {
var set_count = jQuery(this).find('.stat_count').attr('data-count');
jQuery(this).find('.stat_temp').stop().animate({width: set_count}, {duration: 3000, step: function(now) {
var data = Math.floor(now);
jQuery(this).parents('.counter_wrapper').find('.stat_count').html(data);
}
});
jQuery(this).addClass('done');
jQuery(this).find('.stat_count');
}
},{offset: 'bottom-in-view'});
}
});
}
}
Not being proficient in jQuery, I attempted a couple of changes in the code:
changed toif (jQuery(window).width() > 760) {
because minimum screen width might be the issue?if (jQuery(window).width() > 0) {
removed this if statement altogether because I thought it was causing an issue with applying the class.if (!jQuery(this).hasClass('done')) {
Here is the HTML structure that corresponds to the JavaScript code:
<div class="row">
<div class="col-sm-6 module_number_5 module_cont pb50 module_counter">
<div class="module_content shortcode_counter breedte-100">
<div class="counter_wrapper">
<div class="counter_content">
<div class="stat_count_wrapper">
<h1 class="stat_count speciale-grote-counter" data-count="{{ records[1].number }}">0</h1>
</div>
<div class="counter_body">
<h5 class="counter_title speciale-grote-counter-text">{{ records[1].year }}</h5>
<div class="stat_temp"></div>
</div>
</div>
</div>
</div>
</div>
If anyone has insights into resolving this issue, please share. Your help is greatly appreciated!
Thank you in advance! Happy coding.
ADDITIONAL NOTES:
JSFIDDLE Linked working jsfiddle. It seems that my error occurs only when the counter is not initially visible on the screen and the screen width is under 800px, which might not happen on JSFIDDLE due to the setup.
ADDITIONAL NOTE 2:
I have identified the specific line causing the issue:
jQuery(this).waypoint(function(){
},{offset: 'bottom-in-view'});
ADDITIONAL NOTE 3:
After further investigation, I found another problematic line:
Deleted :
jQuery(this).waypoint(function(){
},{offset: 'bottom-in-view'});
The issue has now been resolved and everything works perfectly fine.