Progress Bar...

06 Mar 2005

So, I've been a little busy at work. Let's just say with Chris passing on, someone leaving the company, and sort of new hire(3 almost 4 months) out with back problems... my life has been nothing but boring. It's great being the one person the entire company counts on seriously. Trial by fire is important it builds character, experience, and at the core sees how well you manage under extreme pressures. It keep thinking of the Army of one jokes. I'm the IT of one. Which leads me to the reason for my post.

Code!

I've found that lately I've been in research mode... very code productive lately. As a result this was created. I posted this on php.net but thought since it is my own work I'ld post it here just in case something happened to it.

Start Original Post

I figured out a way to create a simple progress bar that is for the most part cross platform. Seeing as I got my ideas from this site (http://www.php.net) it's only share to give back to the community.

Note: Something interesting about browser buffering... you have to have the < html >< body > for Firefox and some other browsers to recognize items by their id in Javascript. So I recommend using some sort of header function before calling this function.

Code

< ? php

function fn_progress_bar($intCurrentCount = 100, $intTotalCount = 100)
{
   static $intNumberRuns = 0;
   static $intDisplayedCurrentPercent = 0;
   $strProgressBar = '';
   $dblPercentIncrease = (100 / $intTotalCount);
   $intCurrentPercent = intval($intCurrentCount * $dblPercentIncrease);
   $intNumberRuns++;

   if(1 == $intNumberRuns)
   {
       $strProgressBar = <<< BAR
< table width='50%' id='progress_bar' summary='progress_bar' align='center'>< tbody>< tr>
< td id='progress_bar_complete' width='0%' align='center' style='background:#CCFFCC;'> < /td>
< td style='background:#FFCCCC;'> < /td>
< /tr>< /tbody>< /table>
< script type='text/javascript' language='javascript' >
function fn_progress_bar_update(intCurrentPercent)
{
   document.getElementById('progress_bar_complete').style.width = intCurrentPercent+'%';
   document.getElementById('progress_bar_complete').innerHTML = intCurrentPercent+'%';
}
< /script >
BAR;
   }
   else if($intDisplayedCurrentPercent <> $intCurrentPercent)
   {
       $intDisplayedCurrentPercent = $intCurrentPercent;
       $strProgressBar = < << BAR
< script type='text/javascript' language='javascript' >
fn_progress_bar_update($intCurrentPercent);
< /script >
BAR;
   }
   if(100 < = $intCurrentPercent)
   {
       $intNumberRuns = $intDisplayedCurrentPercent = 0;
       $strProgressBar = <<< BAR
< script type='text/javascript' language='javascript' >
document.getElementById('progress_bar').style.visibility='hidden';
< /script >
BAR;
   }
   echo $strProgressBar;
   flush();
   ob_flush();
}

?>

End Original Post

Example


< ? php

$intTotal = 5000;

for($intCounter = 0; $intCounter <= $intTotal; $intCounter++)
{
fn_progress_bar($intCounter, $intTotal);
}

? >

Future Ideas

Make it so you can have several unique progress bars per page with their own progress.
Make sure it is as close to 100% cross-browser as possible.

Credits

If you copy and paste be sure to give credit.

If you do find this useful comment here, Thanks.

{"display_name"=>"chris", "login"=>"chris", "email"=>"crmacd@gmail.com", "url"=>"http://www.crmacd.com"}