Brecht27 Brecht27 - 3 months ago 11
HTML Question

HTML data attributes on the same page are not working for countdown script

I used this script: http://keith-wood.name/countdown.html
I have more than one 'data-time' attributes on the same page like you see in the code.

The first data-time attribute is 17 nov and the second one gives data-time attribute 18 nov:

<!-- 1st block -->
<div class="kf_event_list_wrap">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-5">
<!--EVENT LIST THUMB Start-->
<div class="kf_event_list_thumb">
<figure>
<img src="extra-images/event_1.jpg" alt=""/>
<div id="defaultCountdown" data-time="nov 17, 2016 12:00:00" class="defaultCountdown"></div>
</figure>
</div>
<!--EVENT LIST THUMB END-->
</div>

<div class="col-lg-6 col-md-7 col-sm-7">
<!--EVENT LIST DES Start-->
<div class="kf_event_list_des">
<h4><a href="#">University <span>Convocation</span></a></h4>
<p>Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisie tiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam.</p>
<ul class="kf_event_list_links">
<li><i class="fa fa-user"></i><a href="#">John Doe</a></li>
<li><i class="fa fa-calendar"></i><a href="#">Saturday 10:00 AM</a></li>
</ul>
</div>
<!--EVENT LIST DES END-->
</div>
</div>
</div>




<!-- 2th block -->
<div class="kf_event_list_wrap">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-5">
<!--EVENT LIST THUMB Start-->
<div class="kf_event_list_thumb">
<figure>
<img src="extra-images/event_1.jpg" alt=""/>
<div id="defaultCountdown" data-time="nov 18, 2016 12:00:00" class="defaultCountdown"></div>
</figure>
</div>
<!--EVENT LIST THUMB END-->
</div>

<div class="col-lg-6 col-md-7 col-sm-7">
<!--EVENT LIST DES Start-->
<div class="kf_event_list_des">
<h4><a href="#">University <span>Convocation</span></a></h4>
<p>Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisie tiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam.</p>
<ul class="kf_event_list_links">
<li><i class="fa fa-user"></i><a href="#">John Doe</a></li>
<li><i class="fa fa-calendar"></i><a href="#">Saturday 10:00 AM</a></li>
</ul>
</div>
<!--EVENT LIST DES END-->
</div>
</div>
</div>


But now, the javascript code:

if($('.defaultCountdown').length){
var date1 = $('#defaultCountdown').data('time');
var date = new Date(date1);
$('.defaultCountdown').countdown({ until: date});
}


Now i have a problem that the timer is showing the same countdown. Maybe because the id is the same on the 2 blocks?

I thought that there was something wrong with my javascript and i searched for something else but its also not working. I don't know of this is in the right direction:

if($('.defaultCountdown').length){
$('[data-time]').each(function() {
var $this = $('.defaultCountdown'), finalDate = $(this).data('time');
$this.countdown(finalDate, function(event) {

var date = new Date(finalDate);
$('.defaultCountdown').countdown({ until: date});
});
});
}

Answer

I think this will work:

$('[data-time]').each(function() {
    var $this = $(this), finalDate = new Date($(this).data('time'));
    $this.countdown({ until: finalDate}); 
    // or all in one line
    // $(this).countdown({ until: new Date($(this).data('time'))});
});

I think that the problem with what you've tried is that you were using:

$('.defaultCountdown').countdown({ until: date});

Instead of:

$this.countdown({ until: date});

You were setting the countdown to all the elements with class defautlCountdown instead of setting it to the current element $this.