I am using the script below to produce a progress bar to the track the progress of a timer. The timer runs for a certain time before it completes itself and deletes (it's for a browser based game where you build a building and eventually after a duration the construction is complete).
Please see code below:
$remaining=$item['start']+$item['duration']*60-time();
if ($remaining < 1) {
$remaining='0.1';
}
echo "<script type='text/javascript'>
var something = $remaining;
//<![CDATA[
$(function(){
$(document).ready(function(){
jQuery.fn.anim_progressbar = function (aOptions) {
// def values
var iCms = 1000;
var iMms = 60 * iCms;
var iHms = 3600 * iCms;
var iDms = 24 * 3600 * iCms;
// def options
var aDefOpts = {
start: new Date(), // now
finish: new Date().setTime(new Date().getTime() + something * iCms), // now + 60 sec
interval: 100
}
var aOpts = jQuery.extend(aDefOpts, aOptions);
var vPb = this;
// each progress bar
return this.each(
function() {
var iDuration = aOpts.finish - aOpts.start;
// calling original progressbar
$(vPb).children('.pbar').progressbar();
// looping process
var vInterval = setInterval(
function(){
var iLeftMs = aOpts.finish - new Date(); // left time in MS
var iElapsedMs = new Date() - aOpts.start, // elapsed time in MS
iDays = parseInt(iLeftMs / iDms), // elapsed days
iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), // elapsed hours
iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), // elapsed minutes
iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), // elapsed seconds
iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0; // percentages
// display current positions and progress
$(vPb).children('.percent').html('<b>'+iPerc.toFixed(1)+'%</b>');
$(vPb).children('.elapsed').html(iDays+' days '+iHours+'h:'+iMin+'m:'+iSec+'s</b>');
$(vPb).children('.pbar').children('.ui-progressbar-value').css('width', iPerc+'%');
// in case of Finish
if (iPerc >= 100) {
clearInterval(vInterval);
$(vPb).children('.pbar').children('.ui-progressbar-value').css('width', 0+'%');
$(vPb).children('.percent').html('<b>0%</b>');
$(vPb).children('.elapsed').html('Building queue is empty. <div style= font-size:x-small; color:#000;>(<a href=# onclick=window.location.reload(true);>Reload?</a>)</div>');
}
} ,aOpts.interval
);
}
);
}
// default mode
$('#progress1').anim_progressbar();
// from second #5 till 15
var iNow = new Date().setTime(new Date().getTime() + 5 * 1000); // now plus 5 secs
var iEnd = new Date().setTime(new Date().getTime() + 15 * 1000); // now plus 15 secs
});
});//]]>";
The variable $remaining is where the time to completion is stored and currently this is what the progress bar goes off, the problem is whenever you refresh the page the progress bar starts from 0% again (even though it is faster because more of the timer has run down). I would want it so that it remembers the % point that it was at before and continue to load from that point.
EXTRA INFO
$item['start'] is stored in mysql like: 2014-10-17 12:45:25 and $item['duration'] like: 1 for 1 min and 10 for 10 mins
EDIT: Solution still not found.