How to start this JQuery counter only when its containing DIV appears onscreen?

Question

On a Wordpress page, I have this code to start a count-up, but I only want it to start counting when the user has scrolled far enough down the page so that it appears onscreen (it's in a containing DIV called "three-counter-section").

How do you retrofit this code to enable that?

$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({ countNum: $this.text()}).animate({
countNum: countTo
},

{ duration: 11000,
easing:'easeInOutCubic',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});  
});

Possible duplicate of [JQuery: if div is visible](https://stackoverflow.com/questions/40468981/jquery-if-div-is-visible) — Obsidian Age, Jun 12 '19 at 21:37
Not a duplicate of the proposed answer. That seems to apply only if something was visible/invisible via CSS (and I tried it anyway, but didn't work). — MacGyver_97, Jun 12 '19 at 22:33

score 0 · Answer 1 · answered Jun 12 '19 at 21:36

0

You can simple do following to trigger an event when any element is visible.

setInterval(function(){
  if($('.div1').is(':visible')){
    //do something
  }
  else {
    //do nothing..
  }      
}, 100);

** Change .div1 as you needed.

answered Jun 12 '19 at 21:36

Praveen Govind

2,619
2
32
45

Thanks, but getting an error: Uncaught TypeError: $ is not a function – MacGyver_97 Jun 12 '19 at 22:32
That is when you don't include jQuery library, check if this code excutes after jQuery include. – Praveen Govind Jun 12 '19 at 22:37
JQuery is loaded in the head section, before this code is executed. – MacGyver_97 Jun 12 '19 at 22:38
Hm. Still not working. This is the offending line of code: if($('.three-counter-section').is(':visible')){ – MacGyver_97 Jun 12 '19 at 22:51

How to start this JQuery counter only when its containing DIV appears onscreen?

1 Answers1