colored progressbar under textarea

**rjonk** · 09-15-2004 03:07 PM

I tried to make a new textarea with a progressbar under it that colors red when it fills to a maximum character input maybe something for this forums inputbox.
If someone has extra idea's to make it better for crossbrowser use please reply:

here is the code

<script language="JavaScript" type="text/JavaScript">
function textCounter(field,counter,maxlimit,linecounter) {
// text width//
var fieldWidth = parseInt(field.style.width);
var charcnt = field.value.length;
// trim the extra text
if (charcnt > maxlimit) {
field.value = field.value.substring(0, maxlimit);
}
else {
// progress bar percentage
var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px"; // color correction on style from CCFFF -> CC0000
setcolor(document.getElementById(counter),percentage,"background-color");
}
}

function setcolor(obj,percentage,prop){
obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}
</script>
<style type="text/css">

</style><form>
<textarea style="width:300px" rows="5" name="maxcharfield" id="maxcharfield" title="enter maximum 200 characters" onKeyDown="textCounter(this,'progressbar1',200)" onKeyUp="textCounter(this,'progressbar1',200)" onFocus="textCounter(this,'progressbar1',200)" >
</textarea></ br>
<div id="progressbar1" class="progress"> </div>
<script>textCounter(document.getElementById("maxcharfield"),"progressbar1",200)</script>
</form>

**steelersfan88** · 09-15-2004 04:44 PM

The following might be what you are looking for, a tad bit simpler. Boring colors that you might want to change, but the same purpose overall:

Code:

<!-- DOCTYPE -->
<html>
<head>
<script type="text/JavaScript">

  function textCounter(o,pb,m,max) {
    if(typeof document.all) {
      max -= 8;
    }

    var l=o.value.length; 
    var p=100;

    if (l>m) { 
      o.value=o.value.substr(0,m);
    }
    else { 
      p=parseInt(100-((m-l)*100)/m);
    }

    document.getElementById(pb).style.width = parseInt((max*p)/100)+"px";
  }

</script>

<style type="text/css">

  div.mn {
    width:298px;
    height:15px;
    background-color:#FFFFFF;
    border:solid black 1px;
  }

  div.prg {
    width:0px;
    height:100%;
    background-color:blue;
  }

</style>
</head>
<body>
<p>
  <textarea style="width:300px" rows="5" name="maxcharfield" onkeyup="textCounter(this,'pb1',200,'304')"></textarea>
</p>
<p>
  <div id="progres" class="mn"><div id="pb1" class="prg"></div></div>
</p>
</body>
</html>

Dr. Script

**rjonk** · 09-18-2004 07:23 AM

This is a version that keeps the coloring bar under the text area, but i still can't get the textarea vertical top aligned on IE mac, do i have to use a different stylesheet property for ie to align the textbox on text top in IE? For safari the only style that worked for me was inline-table (inline didn't work).

Code:

<script language="JavaScript" type="text/JavaScript">
function textCounter(field,counter,maxlimit) {
	// total text count
	var fieldWidth = parseInt(field.style.width);
	var charcnt = field.value.length;
	// trim the extra text
	if (charcnt > maxlimit) {
		field.value = field.value.substring(0, maxlimit);
  	}
  	else {
 	// progress bar percentage
  	var percentage = parseInt(100 - (( maxlimit - charcnt) *  100)/maxlimit) ;
  	document.getElementById(counter).style.width =  parseInt((fieldWidth*percentage)/100)+"px";
  	// color correction on style from CCFFF -> CC0000 use background for ie, background-color for safari
	col= (typeof document.all)? "background":"background-color";
	setcolor(document.getElementById(counter),percentage,col);
        }
}
function setcolor(obj,percentage,prop){
  obj.style[prop] =  "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}
</script>
<style type="text/css">
<!--
.progress {
	width: 1px;
	height: 4px;
	background-color:#CCFFFF;
	font-size: 4px;
}
.inlinediv {
	display:inline-table;
	position: relative;
	width: 200px;
	vertical-align:text-top;
}
-->
</style>
<form>
Fieldtext label
<div id="limitDiv" class="inlinediv">
<textarea name="limiter" cols="" rows="5"  id="limiter" style="width:200px" title="enter maximum 200 characters"  onFocus="textCounter(this,'limiter_pr',200)"  onKeyDown="textCounter(this,'limiter_pr',200)"  onKeyUp="textCounter(this,'limiter_pr',200)"></textarea><br />
<div id="limiter_pr" class="progress" > </div></div>
</form>
<script>textCounter(document.getElementById("limiter"),"limiter_pr",200)</script>

Thread: colored progressbar under textarea

Thread Tools

Display

colored progressbar under textarea

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions