LECODEJAVA : JAVASCRIPT : BOITE EN PROGRES BAR

BOITE EN PROGRES BAR

DEMONSTRATION

LE CODE JAVA : BOITE EN PROGRES BAR

Accueil Navigation HTML

.progress{
	width: 1px;
	height: 14px;
	color: white;
	font-size: 12px;
  overflow: hidden;
	background-color: navy;
	padding-left: 5px;
}

</style>

function textCounter(field,counter,maxlimit,linecounter) {
	// 
	var fieldWidth =  parseInt(field.offsetWidth);
	var charcnt = field.value.length;

// 
	if (charcnt > maxlimit) { 
		field.value = field.value.substring(0, maxlimit);
	}

else { 
	// Bar de progress en pourcentage
	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)+"%)";
}

</script>

</HEAD>

</form>

Accueil