0

So I'm making a simple progress style bar that displays how much has been entered into each field. The colors in the progress bar represent different amounts which have been entered in the inputs or a combination of inputs. Is there a way to bind the blur behavior to the css width attribute and have it adjust each time the user enters some numbers and leaves the field. I'd like to have it bound to a certain value so each 10% of the bar that shows color would represent $100 or so. Any ideas?

<label for="downPayment" class="form-control-label dpl">Down Payment</label>
<input type="number" class="form-control" id="downPayment" placeholder="$0" onkeypress="return    isNumberKey(event)" onBlur="addCommas(this)"/>
<label for="manufacturerRebate" class="form-control-label mrl">Manufacturer Rebate</label>
<input type="number" class="form-control" id="manufacturerRebate" placeholder="$0" onkeypress="return isNumberKey(event)" onBlur="addCommas(this)"/>
<label for="tradeInValue" class="form-control-label tivl">Trade-In Value</label>
<input type="number" class="form-control" id="tradeInValue" placeholder="$0" onkeypress="return isNumberKey(event)" onBlur="addCommas(this)"/>

<br>
<div class="progress">
<div class="progress-bar" style="width: 90%;">
<div class="progress-bar progress-bar-success" style="width: 80%;">
<div class="progress-bar progress-bar-secondary" style="width: 20%;"></div>
</div>
 </div>

CSS:

.progress {
 height: 1.5625em;
 margin-bottom: 0.5em;
 overflow: hidden;
 background-color: #e5e5e5;
 border-radius: 0.0725em;
 text-align: center;
}

/*  The actual progress bar itself */
.progress-bar {
float: left;
width: 0;
height: 100%;
 color: white;
background-color: #0088cc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

}

.progress-bar-secondary {
background-color: gray;
}

.progress-bar-success {
background-color: #377f31;
}

.progress-bar-danger {
 background-color: #880e14;
}

  .progress-bar-warning {
   background-color: #dba909;
  }

jQuery:

// When the <input>'s value changes

$("#downPayment").change(function() {

// If the value is less than 7, add a red border
if ($(this).val() < 28435) {
$(".progress-bar-secondary").css("width","10%");
}

// Else if the value is equal to 7, add a green border
else if ($(this).val() == 28435) {
$(".progress-bar-secondary").css("width","20%");
}

// Else if the value is greater than 7, add an orange border
else if ($(this).val() > 28435) {
$(".progress-bar-secondary").css("width","40%");
}

// Else if the value is anything else, add a black border
else {
$(".progress-bar-secondary").css("width","20%");
}

});

Fiddle

isaac weathers
  • 1,436
  • 4
  • 27
  • 52

1 Answers1

0

you can use:

$('#INPUT_ID').blur(function(){
    //do something here....
    // you can update the css via jquery like using the jquery .css()
    // $('.progress').css('width','20%');
});

You can use this as your reference http://api.jquery.com/blur/ AND http://api.jquery.com/css/

Lian
  • 1,597
  • 3
  • 17
  • 30
  • Is there a way to not have the width fluctuate? Let's say that I entered 10000 could it go to 40% and if I entered 20000 could it go up to 80%? – isaac weathers Jan 27 '14 at 02:52
  • ok so if value >= 10000 then blah and if value is <= 10001 then blamf. But I'd have to set a specific number of values and no way to make it fluctuate without hardcoding the changes to specific numbers? – isaac weathers Jan 27 '14 at 03:02
  • This might be helpful for you: http://stackoverflow.com/questions/4622086/widthauto-for-input-fields – Miguel Jiménez Jan 27 '14 at 04:34