CODEWITHSUNDEEP
javascriptjquery
Roxx
Roxx

Reputation: 3986

multiple countdown on single page

Below are the html code for countdown. I am using jquery.countdown.min.js plugin.

<ul id="example">
<li><span class="days">00</span><p class="days_text">Days</p></li>
        <li class="seperator">:</li>
        <li><span class="hours">00</span><p class="hours_text">Hours</p></li>
        <li class="seperator">:</li>
    <li><span class="minutes">00</span><p class="minutes_text">Minutes</p></li>
        <li class="seperator">:</li>
    <li><span class="seconds">00</span><p class="seconds_text">Seconds</p></li>
    </ul>

    <div id= "count" data-text="01/01/2016 05:06:59"></div>

and here are the javascript code.

<script type="text/javascript">
    var val1 = $('#count').data('text');

        $('#example').countdown({
            date: val1,
            offset: 0,
            day: 'Day',
            days: 'Days'
        }, function () {
            alert('Done!');
        });
    </script>

It is working fine and giving me the desired output. The limitation is i can use only one countdown timer per page. If i want to use multiple on same page then i have to add multiple javascript code.

Below is the scenario.

<ul id="example">
        <div data-countdown="01/01/2016 05:06:59"></div>
         <div data-countdown="01/01/2017"></div>
         <div data-countdown="01/01/2018"></div>
        <div data-countdown="01/01/2020"></div>   
      </ul>

I tried below code but it is not working.

<script type="text/javascript">
     $('[data-countdown]').each(function() {
   var $this = $(this),finalDate = $(this).data('countdown');
        $this.countdown({
            date: finalDate,
            offset: 0,
            day: 'Day',
            days: 'Days'
        }, function () {
            alert('Done!');

        });
        });
    </script>

Upvotes: 7

Views: 9203

Answers (2)

Siamak Ferdos
Siamak Ferdos

Reputation: 3299

Update:

JSFiddle

    <div id="example1" data-countdown="01/01/2016 05:06:59"></div>
    <div id="example2" data-countdown="01/01/2017"></div>
    <div id="example3" data-countdown="01/01/2018"></div>
    <div id="example4" data-countdown="01/01/2020"></div>   

$(function(){
   $('[data-countdown]').each(function() {
      var $this = $(this), finalDate = $(this).data('countdown');
      $this.countdown(finalDate, function(event) {
         $this.html(event.strftime('%D days %H:%M:%S'))}).on('finish.countdown', function() {
            alert("Finish"); 
          });
     });
 });

Upvotes: 6

XuChu LIU
XuChu LIU

Reputation: 238

Javascript and html are friends. When you found something strange happened in the js code, validate the html first. In your case, if you stick on the "ul", use "ul—li—div" structure; otherwise use "div—div" or "nav—div" or "section—div" if applicable

Upvotes: 1

Related Questions