CODEWITHSUNDEEP
javascriptjqueryhtmlcss
bobby
bobby

Reputation: 29

Stacked Progress Bars

So my progress bar right now is great, but I'm looking to improve it a little bit by adding stacked progress bars. The goal is to make it so when I click on an option it moves the progress bar a certain amount which I can do now. But I want it to make the progress bar like this:

enter image description here

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="AuditScriptAssesmentToolTest.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


  <script src="~/Scripts/jquery-1.12.4.min.js"></script>

 
    <!--************************************************************************ -->
 
<!-- **********************************************************************************************************************************************-->
	
<div id="myProgress">
			<progress id='progressBar' max='100' value='0' style="background-color: red; font-family: Impact, Charcoal, sans-serif;"" ><strong></strong></progress>
		</div>
	</div>
	
	</head>

	<body>
	
<main class="mainarea">
	
<br>
<br>
<br>
<!-- **********************************************1111111111111111111111111********************************************************-->

		<div id="criticalSecurityControlForms">
        <form action="/action_page.php">
            <select id="FirstQOne" name="firstQOne" onchange="this.className=this.options[this.selectedIndex].className" class="whiteselected">
                <option class="whiteselected" disabled selected="selected" value="0">Select an Implementation</option>
                <option class="Not" value="0">Not Implemented</option>
                <option class="ImplementedOnSome" value="10">Implemented on Some Systems</option>
                <option class="All" value="20">Implemented on All Systems</option>
                <option class="AllAndAuto" value="30">Implemented and Automated on All Systems</option>
            </select>
        </form>
    </div>

		<br>

			
		<div id="criticalSecurityControlForms">
        <form action="/action_page.php">
            <select id="FirstQTwo" name="firstQOne" onchange="this.className=this.options[this.selectedIndex].className" class="whiteselected">
                <option class="whiteselected" disabled selected="selected" value="0">Select an Implementation</option>
                <option class="Not" value="0">Not Implemented</option>
                <option class="ImplementedOnSome" value="10">Implemented on Some Systems</option>
                <option class="All" value="20">Implemented on All Systems</option>
                <option class="AllAndAuto" value="30">Implemented and Automated on All Systems</option>
            </select>
        </form>
    </div>
		<br>
	</div>
	<!-- ********************************************222222222222222222222*********************************************************-->


		<div id="criticalSecurityControlForms">
        <form action="/action_page.php">
            <select id="FirstQThree" name="firstQ" onchange="this.className=this.options[this.selectedIndex].className" class="whiteselected">
                <option class="whiteselected" disabled selected="selected" value="0">Select an Implementation</option>
                <option class="Not" value="0">Not Implemented</option>
                <option class="ImplementedOnSome" value="10">Implemented on Some Systems</option>
                <option class="All" value="20">Implemented on All Systems</option>
                <option class="AllAndAuto" value="30">Implemented and Automated on All Systems</option>
            </select>
        </form>
    </div>
    </main>

  <script>
 function update_progressbar() {
    var opt1 = parseFloat( $('option:selected', $('#FirstQOne')).val() );
    var opt2 = parseFloat( $('option:selected', $('#FirstQTwo')).val() );
    var opt3 = parseFloat( $('option:selected', $('#FirstQThree')).val() );
    var opt4 = parseFloat( $('option:selected', $('#FirstQFour')).val() );
    var opt5 = parseFloat( $('option:selected', $('#FirstQFive')).val() );
    var opt6 = parseFloat( $('option:selected', $('#FirstQSix')).val() );
    var opt7 = parseFloat( $('option:selected', $('#FirstQSeven')).val() );
    var opt8 = parseFloat( $('option:selected', $('#FirstQEight')).val() );

      var total = isNaN( opt1 ) ? 0 : opt1;
    if ( !isNaN( opt2 ) ) {
        total += opt2;
    }
    if ( !isNaN( opt3 ) ) {
        total += opt3;
    }
    if ( !isNaN( opt4 ) ) {
        total += opt4;
    }
    if ( !isNaN( opt5 ) ) {
        total += opt5;
    }
    if ( !isNaN( opt6 ) ) {
        total += opt6;
    }
    if ( !isNaN( opt7 ) ) {
        total += opt7;
    }
    if ( !isNaN( opt8 ) ) {
        total += opt8;
    }
    $("#progressBar").prop( 'value', total )
}

$('#FirstQOne').on( 'change', update_progressbar );
$('#FirstQTwo').on( 'change', update_progressbar );
$('#FirstQThree').on( 'change', update_progressbar );
$('#FirstQFour').on( 'change', update_progressbar );
$('#FirstQFive').on( 'change', update_progressbar );
$('#FirstQSix').on( 'change', update_progressbar );
$('#FirstQSeven').on( 'change', update_progressbar );
$('#FirstQEight').on( 'change', update_progressbar );
  </script>
</body>
</html>

So the main goal is to make it so if I pick "Implemented and automated on all systems" it moves the bar green, and if I pick "Implemented on all systems" it will move an orange bar to the right of the green bar. (green bar needs to be first) If I pick "Implemented on Some systems" It moves a yellow bar to the right of the orange bar, ect.

Thanks!

Upvotes: 2

Views: 4408

Answers (1)

Alex
Alex

Reputation: 67531

Well, no one forbids you to see bootstrap implementation: multiple-bars 

const [...barEls] = document.querySelectorAll(`.progress > .progress-bar`);// collection to array

function updateProgress(e) {
    let value = e.target.value;
    const maxVals = [33.33, 33.33, 33.33];// max width values of elements

    for (let i = 0; i < barEls.length; i++) {
        if (value > maxVals[i]) {
            updateElWidth(barEls[i], maxVals[i]);
            value -= maxVals[i];
        } else {
            updateElWidth(barEls[i], value);
            barEls.slice(i + 1).forEach(bar => updateElWidth(bar, 0));// nullify rest bars
            break;
        }
    }

    function updateElWidth(el, width) {
        el.style.width = `${width}%`;
    }
}

const rangeEl = document.getElementById(`range`);
[`input`, `change`].forEach(event => rangeEl.addEventListener(event, updateProgress));
.progress {
    height: 1.5rem;
    overflow: hidden;
    background-color: grey;
    border-radius: .25rem;
}
.progress-bar {
    display: inline-block;
    height: 100%;
}
.bg-weak {
    background-color: #d9534f;
}
.bg-good {
    background-color: #f0ad4e!important;
}
.bg-strong {
    background-color: #5cb85c!important;
}
<div id="progress" class="progress">
  <div class="progress-bar bg-weak" style="width: 33.33%"></div
  ><div class="progress-bar bg-good" style="width: 33.33%"></div
  ><div class="progress-bar bg-strong" style="width: 33.33%"></div>
</div>

<input type="range" id="range" min="0" max="100">

Upvotes: 2

Related Questions