Creating a status bar

crystalb24 · Sep 30, 2004

I want to create a status bar to show the users progress through the application that I'm developing. Ideally I would want to be able to set a percentage value to different sections of the application so that as the user clicked on the "Save my work" button it would reflect in the database that a certain percentage of the work was completed. Unfortunately not all the sections would have the same percentage value. I would want the staus bar to pull the value from the database and show the status (similar to how an email program show the percentage that your mailbox is full). Is this even something that is scriptable?

dwarfthrower · Sep 30, 2004

Here's a little widget to get you started... I'm not sure of it's cross browser applicability, but it's tested IE 6.

You can use it for progess meter, or test scores, anything requiring a graphical representation of a percentage:

Code:

<html>
<head>
<style>
.target{
 text-align: center;
}
.texttop{
 font: bold 12px Arial;
 text-align: center;
}
.textleft{
 font: bold 11px Arial;
 text-align: left;
}
.textright{
 font: bold 11px Arial;
 text-align: right;
}
.statusbar{
 font: bold 11px Arial;
 border: 1px solid;
 text-align: left;
}
.statustext{
 font: bold 11px Arial;
}
</style>
<script>
var strTargetID = "statusbarContainer";
var intStatusWidth = 200;
var strBarColour = "#9999FF";
var strBorderColour = "#666666";
var strTextColour = "#000000";
var strLabel = "Percent Complete";

function statusInit(){
  var objTarget = document.getElementById(strTargetID);
  objTarget.className = "target";
  objTarget.style.color = strTextColour;
 
  var objTextTop = document.createElement("div");
  objTextTop.id = "texttop";
  objTextTop.className = "texttop";
  objTextTop.style.width = intStatusWidth + "px";
  objTextTop.innerText = strLabel;
  objTarget.appendChild(objTextTop);
  
  var objTextMid = document.createElement("div");
  objTextMid.width = intStatusWidth + "px";
  var objTextLeft = document.createElement("span");
  objTextLeft.id = "textleft";
  objTextLeft.className = "textleft";
  objTextLeft.innerText = "0%";
  objTextLeft.style.width = parseInt(intStatusWidth/2) + "px";
  objTextMid.appendChild(objTextLeft);
  var objTextRight = document.createElement("span");
  objTextRight.id = "textright";
  objTextRight.className = "textright";
  objTextRight.innerText = "100%";
  objTextRight.style.width = parseInt(intStatusWidth/2) + "px";
  objTextMid.appendChild(objTextRight);
  objTarget.appendChild(objTextMid);
  
  var objStatusBar = document.createElement("div");
  objStatusBar.width = intStatusWidth + "px";
  objStatusBar.id = "statusbar";
  objStatusBar.className = "statusbar";
  objStatusBar.style.color = strTextColour;
  objStatusBar.style.width = (intStatusWidth + 2) + "px";
  objStatusBar.style.borderColor = strBorderColour;
  objTarget.appendChild(objStatusBar);
}

function setStatus(value){
 try{
  var cleanVal = parseInt(value);
  if(isNaN(cleanVal)) throw("Incorrect argument type - number expected");
  if((cleanVal > 100) || (cleanVal < 0)) throw("Value out of range");
  var objStatus = document.getElementById("statusbar");
  objStatus.innerHTML = "";
  var objStatusLeft = document.createElement("span");
  objStatusLeft.style.backgroundColor = strBarColour;
  objStatusLeft.style.width = parseInt((cleanVal/100) * intStatusWidth) + "px";
  objStatus.appendChild(objStatusLeft);
  
  var objStatusText = document.createElement("span");
  objStatusText.className = "statustext";
  objStatusText.style.position = "absolute";
  objStatusText.style.top = objStatus.offsetTop + "px";
  objStatusText.style.left = objStatus.offsetLeft + "px";
  objStatusText.style.width = (intStatusWidth + 2) + "px";
  objStatusText.style.color = strTextColour;
  objStatusText.innerText = cleanVal + "%";
  var objTarget = document.getElementById(strTargetID);
  objTarget.appendChild(objStatusText);
 }
 catch(e){
   alert(e);
 }
}
</script>
</head>
<body onLoad="statusInit();">
<div id="statusbarContainer"></div>
Set status to
<input type="text" id="strPercent" onblur="setStatus(this.value)">%
</body>
</html>

Apologies for the lack of comments, this one came straight from my scraps directory.

_{Never be afraid to share your dreams with the world.

There's nothing the world loves more than the taste of really sweet dreams.}

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Creating a status bar

crystalb24

Programmer

dwarfthrower

Programmer

Similar threads

Part and Inventory Search

Sponsor