How do I hide/unhide a progress bar?

Question

User743508062 posted

Hi, finally got the progress bar working but have a final issue that needs to be resolved. How do I hide the progress bar when it has completed 100% and make it available for a new click?

the prgressbar.css:

#progressBar {
        width: 152px;
        height: 8px;
        border: 1px solid #111;
        background-color: #fff;
        float: left; margin-top: 15px;    margin-left: 10px;	
        visibility: hidden;
       
}
#progressBar div {
        height: 100%;
        color: #fff;
        text-align: right;
        line-height: 7px; /* same as #progressBar height if we want text middle aligned */
        width: 0;
        background-color: #e80c4d; /* change this to change bar colour*/
      
}

The div and js are:

<!--Start of progress bar------------------------------------------------------------------------->
<div id="progressBar" title="Please wait: data compiling...">
 <div>      
         <script type="text/javascript" >
             function progress(percent, $el) {
                 $el.css('visibility', 'visible');
                 var progressBarWidth = percent * $el.width() / 100;

                 $el.find('div').animate({ width: progressBarWidth }, 500).html(percent + "%&nbsp;");

             }
   

         var globalP = 0;

             var startProgressBar = function () {
                  
                 if (globalP < 100) {
                     globalP = globalP + 4;
                     progress(globalP, $('#progressBar'));
                     setTimeout(startProgressBar, 500);

                 }

                 else {
                     //done 
                 } 
             } 
                      
        </script> 
</div>	
             
</div>      

Using the above js when I click my excel-icon I get the progress bar to load and display on the page but when it is completes to 100%, I cannot get it to hide and be ready for another click on an icon. Hence your valuable help is needed. Thanks.

Answer 1

User-1366948256 posted

You should following else condition

$el.find('div').animate({ width: progressBarWidth }, 500).html( "0% ");

Answer 2

User743508062 posted

Thanks for the reply. I am a relative noob in this field and hence can you explain further what do you mean with your reply:

You should following else condition
$el.find('div').animate({ width: progressBarWidth }, 500).html( "0% ");

Whenever I have added the condition $el.css('visibility', 'hidden') then the bar stays hidden and does not appear on click event.

So further advice on this issue would be cool and gratefully received. Thanks.

Answer 3

User743508062 posted

Hi, back to the grind after the weekend :-)

I am still stuck, any ideas? Please. Thanks.

Answer 4

User743508062 posted

can anyone, provide any help on this issue?

Answer 5

User281315223 posted

If you want to hide the progress bar after it has completed - try simply adding the necessray logic to hide it (jQuery's hide() function) within the else clause of your startProgress function : 

var startProgressBar = function () {
       if (globalP < 100) {
             //Ensure that it is visible
             $("#progressBar").show();
             globalP = globalP + 4;
             progress(globalP, $('#progressBar'));
             setTimeout(startProgressBar, 500);
       }
       else {
             //It's fininshed
            alert("Done");
            //Set your progress to zero and hide the bar
            globalP = 0;
            progress(globalP, $('#progressBar'));
            $("#progressBar").hide();
       }
}

Working Example

Answer 6

User743508062 posted

The help you have given to me reagrding this issue is simply brilliant!! thanks.