Home/ Questions/Q 8335813
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T03:47:13+00:00

these are the codes for the two <div> s that are used to represent

  • 0

these are the codes for the two <div>s that are used to represent a progress bar (jquery ui progress bar):

<div style="margin-left: 10px; margin-right: 10px; font-size: 10px;" id="progressbar2"> </div>
<div style="margin-left: 10px; margin-right: 10px; font-size: 10px;" id="progressbar"> </div>

this is the jquery that is used to set the value and get the value for the progress bar 

<script>   
$(document).ready(function() {
    var progValue1 = <%=ProgValue1%>;   
    var progValue2 = <%=ProgValue2%>;    
    $("#progressbar").progressbar({ value: progValue1});   
    $("#progressbar2").progressbar({ value: progValue2 });   
});   
</script>

on the back end code this is how i transfer the value for the progress bar : 

private int _progValue1 = 100;
private int _progValue2 = 30;

public int ProgValue1 { get { return this._progValue1; } set { _progValue1 = value; } }
public int ProgValue2 { get { return this._progValue2; } set { _progValue2 = value; } }

When a confirm button is clicked this is the code used in the click method to change the value for the progress bar :

this.ProgValue1 = 0;
this.ProgValue2 = 100;

this way all I am doing is changing the value of progressbar from 100 to 0 and the value of progressbar2 from 30 to 100.

Is there a way to change the value in such a fashion so that this can be animated as if the first progress bar is gradually decreasing to 0 and the progressbar2 is increasing to 100?

Thanx in advance

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Take a look at the below one…

    <html>
<head>
<link type="text/css" href="jquery-ui-1.8.22.custom.css" rel="Stylesheet" />

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript">
var increase = 0;
var decrease = 100;

$(document).ready(function() {
    var anim = setInterval(function(){
        $("#progressbar1").progressbar({
            value: increase ++          
        });
        $("#progressbar2").progressbar({
            value: decrease --          
        });
        if(increase == 100){
            // clearInterval(anim);
            increase = 0;
            decrease = 100;
        }
    }, 50);
});
  </script>
</head>
<body>
 <div id="progressbar1" style="width: 500px; height: 15px;"></div><br />
 <div id="progressbar2" style="width: 500px; height: 15px;"></div>
</body>
</html>

    The animation stops when you remove the comments to this line clearInterval(anim)

    Hope this helps!

    • 0