CODEWITHSUNDEEP
jqueryhtml
WarLion
WarLion

Reputation: 123

An issue with jQuery countdown

After a few hours of searching I found a solution to my problem but I still have one problem. I am using the http://hilios.github.io/jQuery.countdown/ on my site to make a countdown.

This is what I am using: jsfiddle example

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

 });
  });

That works great, it shows an expired txt as I like it to be but if I reload the page the expire disappears and 00:00:00 shows. Is any way to keep the expired text even after reloading the page?

Upvotes: 1

Views: 79

Answers (2)

J Santosh
J Santosh

Reputation: 3847

Just add the below JS to your existing code in each loop. 

if ($(this).text() == '00:00:00') $(this).html('expired!');

Demo

This finish.countdown event is fired only when timer expires after starting, but your timer is already expired in page load, so this event will not fire. so simply use a if condition to check the text and replace it.

Upvotes: 1

Alexis Tyler
Alexis Tyler

Reputation: 939

Javascript is run on page load, when you refresh the page it would have no idea that it's been run before. To keep it at 00:00:00 when you refresh you'd need to store the information either client side using localstorage or send a request to your server to save the information into a database, then once you reload get the info from the database and if it's already hit 00:00:00 according to your database then show it.

Upvotes: 1

Related Questions