0

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.

3 Answers 3

1

You can start and stop PHP as you like by adding opening an closing tags like:

some html;
<?php 
    do some php 
?>
some more html
<?php 
    do some php 
?>

So in your case:

$remaining=$item['start']+$item['duration']*60-time();
if ($remaining < 1) {
    $remaining='0.1';
    }

?>  //STOP PHP HERE

<script type='text/javascript'>
var something = "<?php echo $remaining;?>"; //INSERT A LITTE PHP
//<![CDATA[ 

 ....

});
});//]]>; //REMOVE LAST QUOTE
Sign up to request clarification or add additional context in comments.

Comments

0

Add Your PHP Variable as below

   echo "<script type='text/javascript'>
    var something = ".$remaining.";
    //<![CDATA[ ...";

Comments

0

You're only telling the javascript how much time is remaining. You might as well also parse the start time too and let the anim_progressbar function work out what the percentage is first, before you start the this.each loop.

in the line

start: new Date(), // now

put the start time in the (), and let the date be parsed.

EDIT:

As far as I'm aware... the Javascript Date object would recognise that "start" date as valid and parse it accordingly... let me know if I'm wrong...

EDIT2:

Provided you haven't changed your code (as per other suggestions):

$remaining=$item['start']+$item['duration']*60-time();
$startdate = $item['start'];   // NEW VARIABLE
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($startdate), // now  // NEW VARIABLE
        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

});
});//]]>";

4 Comments

I changed it to this: start: new Date(startdate), and added $startdate=$item['start']; as a variable further up but this results in the bar being 100% and full when it starts.. if that's what you meant.
so... in the PHP at the top $startdate = $item['start']; then -- start: new Date($startdate), // now
Already defined it in the javascript as: var startdate = $startdate; but just tried start: new Date($startdate) and still the same thing.. get the time remaining showing like normal but the bar loads to 100% straight away.. maybe a problem with how $startdate is shown?
RESPONSE TO EDIT2: That's exactly what I thought and have copied all the code into place but still getting the bar at 100% on start.. see image: postimg.org/image/mezpkxfvb strange..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.