Hide PHP Countdown Timer When Timer Reaches 0 - php

Question

I have this PHP countdown timer script, and I'm trying to have JQuery hide the timer when it reaches 0 days, 0 hours, 0 mins, 0 secs. I know the JQuery show() and hide() functions can be used here, however I am unaware of how to trigger those JQuery functions when the PHP countdown timer reaches 0.
PHP code:
$secs = strtotime("2013-06-23 17:00:00 +1 GMT") - time();
$days = floor($secs / 86400);
$secs %= 86400;
$hours = floor($secs / 3600);
$secs %= 3600;
$mins = floor($secs / 60);
$secs %= 60;
echo "<div class='value'>$days<br><p class='time'>Days</p></div>";
echo "<div class='value'>$hours<br><p class='time'>Hours</p></div>";
echo "<div class='value'>$mins<br><p class='time'>Mins</p></div>";
echo "<div class='value'>$secs<br><p class='time'>Secs</p></div>";
?>
JQuery I'm using:
$(document).ready(function(){
setInterval(function(){
$("#timer").load("date.php");
});
});
The countdown timer is displayed in this div:
<div id="timer"></div>

Answer 1

I've rewritten your code using JSON instead. Here it is:
HTML:
<div class="countdown">
<div class="days"><span>$days</span><br> <p>Days</p></div>";
<div class="hours"><span>$hours</span><br> <p>Hours</p></div>";
<div class="minutes"><span>$mins</span><br> <p>Mins</p></div>";
<div class="seconds"><span>$secs</span><br> <p>Secs</p></div>";
</div>
JS:
$.getJSON("date.php").done(function(data){
if(data.zero){
// timer is 0 so hide
$('.countdown').fadeOut();
}else{
$('.countdown').fadeOut(function(){
$(this).find('.days span').html(data.days);
$(this).find('.hours span').html(data.hours);
$(this).find('.minutes span').html(data.minutes);
$(this).find('.seconds span').html(data.seconds);
$(this).fadeIn();
});
}
}).fail(function(){
// if it fails this function will be called
});
PHP:
<?php
$json = array();
$json['seconds'] = strtotime("2013-06-23 17:00:00 +1 GMT") - time();
$json['days'] = floor($secs / 86400);
$json['seconds'] %= 86400;
$json['hours'] = floor($secs / 3600);
$json['seconds'] %= 3600;
$json['minutes'] = floor($secs / 60);
$json['seconds'] %= 60;
$json['zero'] = array_sum($json) > 0 ? false : true;
echo json_encode($json)
?>

Answer 2

As mentioned, you can use Javascript for this entirely.
If you do wish to use PHP + Javascript, you need to expand your timer callback to parse the time. Check this question for an example:
javascript: how to parse a date string
Once you parse the various parts of the time, you can then use hide() if the timer reaches zero.
With jQuery, you can parse the time parts like this:
var days = $("#timer .value").eq(0).html();
var hours = $("#timer .value").eq(1).html();
var mins = $("#timer .value").eq(2).html();
var secs = $("#timer .value").eq(3).html();
However, you will need to put the value itself in a separate div, i.e. something like:
echo "<div class='value'>$days</div><div><br><p class='time'>Days</p></div>";
echo "<div class='value'>$hours</div><div><br><p class='time'>Hours</p></div>";
echo "<div class='value'>$mins</div><div><br><p class='time'>Mins</p></div>";
echo "<div class='value'>$secs</div><div><br><p class='time'>Secs</p></div>";
This way, you can get the whole contents of the value div without breaking up the value it contains into chunks. If you absolutely must have everything in the same div, you can split the div contents with Javascript's split() function:
http://www.w3schools.com/jsref/jsref_split.asp

Answer 3

You could just hide it with jQuery... Something like this:
$(document).ready(function(){
if ($("#timer:contains('0 days, 0 hours, 0 mins, 0 secs')").length) {
$("#timer").hide();
}
});
Demo