Progress Bars

[Wormopolis]

Browsers Tested: IE, FF, and Chrome
Placement: board or global footers

UBBC code for creating progress bars in a post. includes CSS for styling the bar and text. Also has a UBBC button that appears in the tray that spits out the constructor format.


<style type="text/css">
<!--
.progdiv {border: #EEEEEE 1px solid;}
.progtitle {color: #00FF44;}
.progmade {background-color: #FF0000;}
.progleft {background-color: #222222;}
-->
</style>

<script type="text/javascript">
<!--
// progress bar v1.01
// by Wormopolis - www.wormocodes.com
// keep header intact - do not repost except for support

//format:  [progress=title,startnum,endnum,progress value,show labels]

var btnImage="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/progbar.png";
var titlePlacement=1; //0 for left side, 1 for above

//  no need to edit below unless you know what you are doing
if (document.postForm) {
 UBBCtray=postForm.color.parentNode;
 var nwBtn=document.createElement('a');
 nwBtn.href="javascript: add('[progress=title,startnum,endnum,value,showlabels?]')";
 var btnImg=document.createElement('img');
 btnImg.border=0; btnImg.src=btnImage; btnImg.title="Progress Bar";
 nwBtn.appendChild(btnImg);
 UBBCtray.appendChild(document.createElement('br'));
 UBBCtray.appendChild(nwBtn);
}
if (pb_action.match(/(display|search2)/)) {
function convertBar(PBT, PBS, PBE, PBV, PBH) {
 if (PBH==undefined || PBH=='no' || PBH=='false') PBH=false;
 var tmpdata='<center><div class="progdiv">'
 tmpdata+=(titlePlacement==0 ? '<table><tr><td>' : '')+'<font size="2" class="progtitle">'+PBT+'</font>';
 tmpdata+=(titlePlacement==0 ? '</td><td>' : '<br>');  
 tmpdata+='<table><tr><td align="right">' + (PBH!=false ? '<font size="1" class="progtitle">'+parseInt(PBS)+'</font>' : '') + '</td><td align="center">';
 var calcPerc=parseInt((parseInt(PBV)-parseInt(PBS))/(parseInt(PBE) - parseInt(PBS))*100);
 var tablelabel=parseInt(PBV)+' = '+calcPerc+'%';
 tmpdata+='<table width="100%" cellSpacing="0" title="'+tablelabel+'"><tr>';
 for (i=0; i<100; i++) {
   tmpdata+='<td width="2px" height="10px" class="' + (i<calcPerc? 'progmade' : 'progleft') +'"></td>';
 }
 tmpdata+='</tr></table>';
 tmpdata+='</td><td align="left">' + (PBH!=false ? '<font size="1" class="progtitle">'+parseInt(PBE)+'</font>' : '') + '</td></tr></table>';
 tmpdata+=(titlePlacement==0 ? '</td></tr></table>' : '')+'<br>';  
 tmpdata+='</div></center>';
 return tmpdata;
}

 for (tds=document.getElementsByTagName('td'), cd=0; cd<tds.length; cd++) {
   if (tds[cd].width=='80%' && tds[cd].className.match(/windowbg/) && tds[cd].vAlign=='top') {
     while (!tds[cd].innerHTML.match(/\[norunubbc\]/) && tds[cd].innerHTML.match(/\[progress=(.*?)\]/i)) {
       var progData=RegExp.$1.split(',');
       var progBarTitle=progData[0];
       var progBarStart=progData[1];
       var progBarEnd=progData[2];
       var progBarValue=progData[3];
       var progBarShowem=progData[4];
       tds[cd].innerHTML = tds[cd].innerHTML.replace(/\[progress=(.*?)\]/i,convertBar(progBarTitle, progBarStart, progBarEnd, progBarValue, progBarShowem));
     }
   }
 }
}


// -->
</script>



preview: www.wormocodes.com/index.cgi?board=graphreqaswell&action=display&thread=976