1
I did a job javascript that takes the number of Ids
filled and returns a number that turns into the percentage of width
that makes the bar move, however, I have a character counter that should send a value to the bar also, but as I am not a good connoisseur of javascript I’m afraid I’ve done something wrong.
<div class="progress">
<div id="progressTerm" class="progress-bar" role="progressbar"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
style="width:0%; min-width:0%; max-width:100%; background-color:
#B22222;">TERMOMETRO</div>
</div>
$(document).on("input", "#TxtDesc", function () {
var limite = 0;
var caracteresDigitados = $(this).val().length;
var caracteresRestantes = limite + caracteresDigitados;
$(".caracteres").text(caracteresRestantes);
});
$(function() {
function progress(percent, $element, velocity) {
percent = percent >= 100 ? 100 : percent;
var progressBarWidth = percent * $element.width() / 100;
$element.find('div').stop().animate({ width: progressBarWidth }, velocity, "linear").html("Nivel de relevância");
var validA = 0;
}
$('#TxtDesc').on('input', function(){
var value = $(this).val();
var progressValue = $('#progressText div');
var color, percent = 0;
if(value.length <= 100){
color = "red";
percent = 15;
}else if(value.length <= 199){
color = "yellow";
percent = 50;
}else{
color = "#32CD32";
percent = 100;
validA = 30;
}
var Valor = value.length;
progress(percent, $('#progressText'), 300);
progressValue.css("background", color);
$('#progressText').css("border", "1px solid " + color);
var $progressBar = $('[id=progressTerm]'), // Barra de Progresso.
$progressElements = $('[id=progressValorInteiro]'), // Elementos que devem ser checados // para modificar o valor da barra.
$progressElements2 = $('[id=progressValorMeio]'),
TOTAL = $progressElements.length; // Total de elementos.
$progressElements.on('change, blur', function() {
// Faz um filtro com o total elementos válidos.
// Nesse caso, campos que não estejam "em branco" e que não estejam marcados
// como ':invalid'.
var valid = $progressElements.filter(function() {
return ($(this).val() || $(this).prop('checked')) && !$(this).is(':invalid');
}).length;
var ResultF = (valid + validA);
// Calcula a porcentagem e altera o valor da width da barra.
var percent = (ResultF * 100) / TOTAL;
$progressBar.width(percent);
})
});
});
</script>