SORRY GUYS!!!
My deepest
apologies
, I had not read all of Thomas' weblogs yet on the JavaScript stuff although I have them all bookmarked and waiting to be read and therefore I have done what I don't think anyone else has so far done and that is create a weblog covering the same topic or close to the same topic.BSP Custom Elements: Open Source JavaScript Part 3
No need to read further...
Ok, you have a htmlb:textedit field and you are allowing the user to input some text, write a review or whatever. Well you don't want to give the ability to write a novel and you don't just want to cut them off cold so what do you do? Provide a link that they can click and see how many characters they've typed or perhaps a nice little counter window? What about a nice graphical progress bar?
Some of you are probably at this point saying, "hey Craig! this is going against your recent accesibility series ," and that may be but sometimes the need is there and you have a limited number of options.
So what have I done? I've gone out again to one of my favorite websites, Dynamic Drive and found a great little script and then figured out how to get into my BSP.
So for test purposes go ahead and create a simple "Page with Flow logic" and let's get started. Then take a look at this OnChange Event for inputField for some nice tips on how to get JavaScript events into place.
.progress
/***********************************************
Form Field Progress Bar- By Ron Jonk- http://www.euronet.nl/~jonkr/
Modified by Dynamic Drive for minor changes
Script featured/ available at Dynamic Drive- http://www.dynamicdrive.com
Please keep this notice intact
***********************************************/
function textCounter(field,counter,maxlimit,linecounter) {
// text width//
var fieldWidth = parseInt(field.offsetWidth);
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";
document.getElementById(counter).innerHTML="Limit: "percentage"%"
// 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)"%)";
}
.progress
/***********************************************
Form Field Progress Bar- By Ron Jonk- http://www.euronet.nl/~jonkr/
Modified by Dynamic Drive for minor changes
Script featured/ available at Dynamic Drive- http://www.dynamicdrive.com
Please keep this notice intact
***********************************************/
function textCounter(field,counter,maxlimit,linecounter) {
// text width//
var fieldWidth = parseInt(field.offsetWidth);
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";
if ( parseInt(percentage) > 95 ) {
document.getElementById(counter).src = "bar_red.gif";
} else if ( parseInt(percentage) > 85 ) {
document.getElementById(counter).src = "bar_yellow.gif";
} else {
document.getElementById(counter).src = "bar_green.gif";
}
document.getElementById(counter + '_text').innerHTML= " "percentage"%"
}
}
15 Comments