• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4524
  • Last Modified:

jquery countdown - how to prevent timer from resetting on page reload?

I'm using jquery countdown (http://keith-wood.name/countdown.html) in a script, but I can't figure out how to prevent the timer from resetting on a page reload...  Hoping someone knows how or can give me a suggestion?  I'm using php, so I thought maybe at some point, I can add a variable to a $_SESSION, but is that enough?
0
n00b0101
Asked:
n00b0101
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
A full page reloads all code including javascript.  Any scripts running on the previous page are gone.  You would have to load a variable to restart the counter on the reloaded page.
0
 
Ray PaseurCommented:
There is no really good answer for what you want to do, but this might be somewhat useful.  First, read this article carefully so that you understand the DATETIME arithmetic issues.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_201-Handling-date-and-time-in-PHP-and-MySQL.html

You can write a timer value into the browser output stream with something like the code shown in the snippet.  You can also keep a timer value in a data base or in the session array.  So every time the page is loaded, you can take the original time, subtract the time of "now" and that will give you the amount of remaining time to put into the JavaScript.  Obviously if the end of time has already come you will have some kind of special processing to do, like telling the client, "Sorry!"

HTH, ~Ray
<?php // RAY_countdown_timer.php
error_reporting(E_ALL);

// SET THE TIMER VALUE IN THE PHP SCRIPT
$timer = '7';
?>

<script type="text/javascript">
var interval = "";
var sekonds  = <?php echo $timer; ?>;

function startInterval()
{
    interval = window.setInterval("tTimer()",1000);
}
function stopInterval()
{
    window.clearInterval (interval);
    interval="";
}
function tTimer()
{
    document.thinkTime.tDisplay.value = sekonds--;
    if (sekonds == -1)
    {
        stopInterval();
    }
}
</script>

<script>
document.write('<meta http-equiv=\"Refresh\" content=\"<?php echo $timer; ?>;url=http://lmgtfy.com?q=JavaScript+Timer\">');
</script>

<form name="thinkTime">
This page will search for a JavaScript Timer in
<input readonly class="timerBox" size="1" type="text" name="tDisplay" value="">
<script>startInterval();</script>
seconds.
</form>
<a href="http://lmgtfy.com?q=JavaScript+Timer">Click here if you don't want to wait.</a>

Open in new window

0
 
leakim971PluritechnicianCommented:
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now