CODEWITHSUNDEEP
javascriptjquerycountdowntimer
baxi
baxi

Reputation: 153

Multiple Countdown timer on a page

I've created a page in which multiple countdown timers are added. But I want them to work only if a user is at the particular section like in a page dot navigation is added from which on click user is taken to that section using scroll effect, so in each section, there is a countdown timer, but that is working only once and each section value is updated, how to make countdown timer to work only when the user is at that particular section.

Here is the script

var a = 0;   
$(window).scroll(function() {

  var oTop = $('#counter{{loop.index}}').offset().top - window.innerHeight;
 
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },

        {

          duration: 2000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
            //alert('finished');
          }

        });
    });
    a = 1;
  }

});

This is dynamic but if I have all different script for each section then also it is working same

var oTop = $('#counter{{loop.index}}').offset().top - window.innerHeight;

For this section Every section has equal height, I have checked it from alert($("#counter4").height());

From this .height() function

Upvotes: 2

Views: 293

Answers (1)

eliana
eliana

Reputation: 48

You Can take an idea from this example it also has mutiple countdown timer and working on scroll https://www.cssscript.com/demo/scroll-triggered-counter/

Upvotes: 1

Related Questions