SOURCE CODE: Characters Used Indicator
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Characters Used Indicator | JavaScript Examples | UIZE JavaScript Framework</title>
<meta name="keywords" content="form Uize.Widget.Bar.Slider"/>
<meta name="description" content="Among the creative uses of the bar widget is this characters used indicator for a textarea. As you type, the bar indicates chars used and remaining."/>
<link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
<link rel="stylesheet" href="../css/page.css"/>
<link rel="stylesheet" href="../css/page.example.css"/>
<style type="text/css">
.fieldHeading {
position:relative;
width:400px;
height:18px;
font-weight:bold;
color:#fff;
background:#000 url(../images/heading-bg.gif) left top repeat-x;
}
.charsUsedIndicator {
position:absolute;
left:0;
top:0;
width:400px;
height:20px;
visibility:hidden;
}
.charsUsedSlider {
position:absolute;
left:0;
top:0;
width:400px;
height:18px;
}
.charsText {
position:absolute;
font-family:Arial, Helvetica, Verdana;
font-size:12px;
font-weight:bold;
letter-spacing:1px;
width:400px;
height:20px;
line-height:18px;
color:#fff;
}
.charsText div {
position:absolute;
}
.charsUsed div, .charsRemaining div {
width:100%;
}
.charsUsed {
left:5px;
}
.charsUsed div {
text-align:left;
}
.charsRemaining {
right:5px;
}
.charsRemaining div {
text-align:right;
}
.stroke {
color:#000;
}
.strokeLeft {left:-1px;}
.strokeCenterHorz {left:0;}
.strokeRight {left:1px;}
.strokeTop {top:-1px;}
.strokeCenterVert {top:0;}
.strokeBottom {top:1px;}
.explanation {
margin-bottom:20px;
}
</style>
</head>
<body>
<script type="text/javascript" src="../js/Uize.js"></script>
<h1 class="document-title">
<a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
<a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
Characters Used Indicator
<div id="page-actions" class="pageActions">
<a href="source-code/slider-chars-used.html" class="buttonLink">SOURCE</a>
</div>
</h1>
<div class="main">
<!-- explanation copy -->
<div class="explanation">
<p>In this example, an instance of <a href="../reference/Uize.Widget.Bar.Slider"><code>Uize.Widget.Bar.Slider</code></a> is used to provide feedback - as you type - on how many characters are still permitted in the text input. When you focus the text input, the title for the field is replaced by a dynamically updated indicator that informs you of how many characters you've used and how many characters are remaining. As you type more characters, the slider that is displayed beneath the chars summary is advanced from left to right. As the bar gets closer to "full", its color becomes increasingly hotter, until it is finally solid red once all of the allotted characters are used.</p>
</div>
<!-- slider UI -->
<center>
<form>
<div class="fieldHeading"">
Enter a Description (200 character maximum)
<div id="page-charsUsedIndicator" class="charsUsedIndicator">
<div id="page_charsUsedSlider" class="charsUsedSlider"></div>
<!-- the DIVs for the chars used text and its stroke -->
<div class="charsText charsUsed">
<div id="page-charsUsedStrokeTL" class="stroke strokeLeft strokeTop"></div>
<div id="page-charsUsedStrokeTC" class="stroke strokeCenterHorz strokeRight"></div>
<div id="page-charsUsedStrokeTR" class="stroke strokeRight strokeTop"></div>
<div id="page-charsUsedStrokeCL" class="stroke strokeLeft strokeCenterVert"></div>
<div id="page-charsUsedStrokeCR" class="stroke strokeRight strokeCenterVert"></div>
<div id="page-charsUsedStrokeBL" class="stroke strokeLeft strokeBottom"></div>
<div id="page-charsUsedStrokeBC" class="stroke strokeCenterHorz strokeBottom"></div>
<div id="page-charsUsedStrokeBR" class="stroke strokeRight strokeBottom"></div>
<div id="page-charsUsed" class="strokeCenterHorz strokeCenterVert"></div>
</div>
<!-- the DIVs for the chars remaining text and its stroke -->
<div class="charsText charsRemaining">
<div id="page-charsRemainingStrokeTL" class="stroke strokeLeft strokeTop"></div>
<div id="page-charsRemainingStrokeTC" class="stroke strokeCenterHorz strokeRight"></div>
<div id="page-charsRemainingStrokeTR" class="stroke strokeRight strokeTop"></div>
<div id="page-charsRemainingStrokeCL" class="stroke strokeLeft strokeCenterVert"></div>
<div id="page-charsRemainingStrokeCR" class="stroke strokeRight strokeCenterVert"></div>
<div id="page-charsRemainingStrokeBL" class="stroke strokeLeft strokeBottom"></div>
<div id="page-charsRemainingStrokeBC" class="stroke strokeCenterHorz strokeBottom"></div>
<div id="page-charsRemainingStrokeBR" class="stroke strokeRight strokeBottom"></div>
<div id="page-charsRemaining" class="strokeCenterHorz strokeCenterVert"></div>
</div>
</div>
</div>
<textarea id="page-textArea" style="width:396px; height:100px;" wrap="soft"></textarea><br/>
</form>
</center>
</div>
<!-- JavaScript code to make the static slider HTML "come alive" -->
<script type="text/javascript">
Uize.module ({
required:[
'UizeSite.Page.Example.library',
'UizeSite.Page.Example',
'Uize.Widget.Bar.Slider',
'Uize.Widget.Bar.Slider.xSkin',
'Uize.Node',
'Uize.Color',
'Uize.Color.xUtil'
],
builder:function () {
/*** create the example page widget ***/
var page = window.page = UizeSite.Page.Example ();
/*** create the Uize.Widget.Bar.Slider object ***/
var charsUsedSlider = page.addChild (
'charsUsedSlider',
Uize.Widget.Bar.Slider,
{
minValue:0,
maxValue:200,
orientation:'horizontal',
knobSize:0,
fullTintColor:'#f00',
fullTintLevel:100,
emptyTintColor:'#000',
emptyTintLevel:100,
borderTintColor:'#888',
borderTintLevel:100,
borderThickness:1,
built:false
}
);
/*** function to show/hide chars used indicator ***/
function showCharsUsedIndicator (mustShow) {
if (mustShow) updateCharsUsedSlider ();
page.showNode ('charsUsedIndicator',mustShow);
}
/*** update slider as contents of textarea changes ***/
function updateCharsUsedSlider () {
charsUsedSlider.set ({value:page.getNodeValue ('textArea').length});
var maxChars = charsUsedSlider.get ('maxValue');
charsUsedSlider.setNodeStyle (
'full',
{background:Uize.Color.blend ('hsl(120,100,50)','hsl(0,100,50)',charsUsedSlider / maxChars,'#hex')}
);
function setCharsText (charsType,charsCount) {
var nodeNamePrefix = 'chars' + charsType;
page.setNodeInnerHtml (
[
nodeNamePrefix,
nodeNamePrefix + 'StrokeTL',
nodeNamePrefix + 'StrokeTC',
nodeNamePrefix + 'StrokeTR',
nodeNamePrefix + 'StrokeCL',
nodeNamePrefix + 'StrokeCR',
nodeNamePrefix + 'StrokeBL',
nodeNamePrefix + 'StrokeBC',
nodeNamePrefix + 'StrokeBR'
],
charsCount + ' chars ' + charsType.toLowerCase ()
);
}
setCharsText ('Used',charsUsedSlider);
setCharsText ('Remaining',maxChars - charsUsedSlider);
}
/*** initialize the slider's value to reflect any initial contents in the textarea ***/
updateCharsUsedSlider ();
/*** wire up the page widget ***/
page.wireUi ();
/*** wire up text input ***/
page.wireNode (
'textArea',
{
keyup:updateCharsUsedSlider,
focus:function () {showCharsUsedIndicator (true)},
blur:function () {showCharsUsedIndicator (false)}
}
);
}
});
</script>
</body>
</html>