I decided to attempt to use another new HTML 5 element on a site, the <progress> element. This element is used to show the completed progress of a task, perfect for the tasks in a project management application we are making at Cogneato. I wanted it to have the same appearance for all modern browsers, a visual bar indicating percentage complete of a fixed width total bar. As always, this required some special handling for different browsers. Because of the complications, I needed to output different markup for different browsers, so I made a PHP function using server side browser sniffing to give me the proper output. The convoluted function looks like this:
<?php
$glbProgressWidthModifier=0.8;
function generateProgress($value){
global $glbProgressWidthModifier, $ischrome, $issaf, $isie, $isie9;
$value = $value * 100;
ob_start();
?>
<?php if(!$ischrome){ ?><div class="progresswrap">progress value="" max="100" class="elmprogress" style="width:px;"><span>%</span>></div><?php } ?>
<?php
$fncReturn = ob_get_contents();
ob_end_clean();
return $fncReturn;
}
with a global width modifier to set the width of the total bar, where 1 means 100px, and various is⦠variables set elsewhere based on the sniffed browser. It will return the HTML output given a numeric value between 0 and 1 representing percentage complete, like echo generateProgress(0.85).