locked
How do I hide/unhide a progress bar? RRS feed

  • 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.

    Thursday, June 20, 2013 9:20 AM

Answers

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 24, 2013 12:41 PM

All replies

  • User-1366948256 posted

    You should following else condition

    $el.find('div').animate({ width: progressBarWidth }, 500).html( "0%&nbsp;");
    Thursday, June 20, 2013 11:52 AM
  • 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%&nbsp;");

    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.

    Friday, June 21, 2013 4:44 AM
  • User743508062 posted

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

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

    Monday, June 24, 2013 4:39 AM
  • User743508062 posted

    can anyone, provide any help on this issue?

    Monday, June 24, 2013 12:29 PM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 24, 2013 12:41 PM
  • User743508062 posted

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

    Tuesday, June 25, 2013 6:35 AM