www.webdeveloper.com
Results 1 to 3 of 3

Thread: colored progressbar under textarea

  1. #1
    Join Date
    Sep 2004
    Posts
    2

    colored progressbar under textarea

    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">
    <!--
    .progress {
    width: 1px;
    height: 2px;
    background-color:#CCFFFF;
    }
    -->
    </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">&nbsp;</div>
    <script>textCounter(document.getElementById("maxcharfield"),"progressbar1",200)</script>
    </form>
    Last edited by rjonk; 09-15-2004 at 03:23 PM.

  2. #2
    Join Date
    Jun 2003
    Location
    The United States Site: http://kellyj.t35.com
    Posts
    2,561
    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

  3. #3
    Join Date
    Sep 2004
    Posts
    2
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles