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

Subscribe

* indicates required
Subscribe to plus2net

    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-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer