Demo reading and setting the value of two progress bars

Based on the value of first progress bar the value for second progress bar is set to half of first value.



  • Video Tutorial on JQuery UI Progress Bar

HTML

<div id="progress_bar1"></div>
 <button id=b2> - </button> <button id=b1> + </button>

<br><br>
<div id="progress_bar2"></div>

JQuery

<script>
$(document).ready(function() {
//////////////////////////
$( "#progress_bar1" ).progressbar({
  value: 60,
  max:200,
  min:0
});
////////////////
$( "#progress_bar2" ).progressbar({
  value: 30,
  max:100,
  min:0
});
/////////////////
$("#b1").click(function(){
var present_value1 = $( "#progress_bar1" ).progressbar( "option", "value" );
present_value1=present_value1 + 10;
$( "#progress_bar1" ).progressbar( "option", "value", present_value1 );
var present_value1 = $( "#progress_bar1" ).progressbar( "option", "value" );

var present_value2=present_value1/2;
$( "#progress_bar2" ).progressbar( "option", "value", present_value2 );
var present_value2 = $( "#progress_bar2" ).progressbar( "option", "value" );

$("#progress_bar1")
    .children('.ui-progressbar-value')
    .html(present_value1.toPrecision(3) + '%')
    .css("display", "block");

$("#progress_bar2")
    .children('.ui-progressbar-value')
    .html(present_value2.toPrecision(3) + '%')
    .css("display", "block");

})
///////////////
////////////////
$("#b2").click(function(){
  var present_value1 = $( "#progress_bar1" ).progressbar( "option", "value" );
  present_value1=present_value1 - 10;
  $( "#progress_bar1" ).progressbar( "option", "value", present_value1 );
  var present_value1 = $( "#progress_bar1" ).progressbar( "option", "value" );

  var present_value2=present_value1/2;
  $( "#progress_bar2" ).progressbar( "option", "value", present_value2 );
  var present_value2 = $( "#progress_bar2" ).progressbar( "option", "value" );

  $("#progress_bar1")
      .children('.ui-progressbar-value')
      .html(present_value1.toPrecision(3) + '%')
      .css("display", "block");

  $("#progress_bar2")
      .children('.ui-progressbar-value')
      .html(present_value2.toPrecision(3) + '%')
      .css("display", "block");

})
///////////////
})
</script

DEMO of changing value of Progress bar with Click event of buttons


plus2net.com



Post your comments , suggestion , error , requirements etc here .







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element


JQuery Video Tutorials




We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer