Click here to Skip to main content
15,921,959 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
My client told me to display a progressbar for long running process. I did it with jquery and css and successfully got progress bar. But they not happy with progress bar and asked me to use ajax to create progress bar. so I searched lot in net but no use.. plz help me

CSS

CSS
.progress_bar
                {
                    background-image: url("inc/img/progcob.jpg");
                    height:20px;     
                    width: 150px;                  
                }
                
                .progress
                {
                    margin-top: 10px;
                    width     : 150px;
                    border    :solid 1px black;
                    
                }
    
                #Progressbarval
                {
                    font-family: Arial;
                    font-size: 14px;
                    font-weight: 900;
                    font-style: italic;
                    display: none;
                }



JQUERY

JavaScript
function SetProgress() 
                {
    
                    var statuscount = $("*[id$=hdnchkstatus]").val();
                    var statustotal = $("*[id$=hdnchktotal]").val();
                    progress = 0,
                        progress = statuscount / statustotal * 100;
                    $('.progress_bar').css('width', progress + '%');
                    if (progress != 100) {
                        $('#Progressbarval').html((Math.round(progress)) + '%');
                    }
                    else {
                        $('#Progressbarval').html((Math.round(progress)) + '% ! Completed').css("color", "green");
                    }
                    $('.progress').hover(
                    function () {
                        $('#Progressbarval').show("slow");
                    },
                    function () {
                        $('#Progressbarval').hide("slow");
                    }
                    );
    
                }


.aspx

HTML
<div class="progress">
   <div class="progress_bar"></div>  `div to display progress bar
   </div>

   <label id="Progressbarval">  `to display progress %`
   </label>
Posted
Updated 21-May-13 3:39am
v2
Comments
Mahesh Bailwal 21-May-13 8:53am    
why you need Ajax. Do you need to show progress depending on processing completed on server.
Ryder24 21-May-13 9:08am    
yes. according to condition the progress bar should increase depending upon checkbox clicked. statustotal indicate total number of checkbox and statuscount denote number of checkbox clicked. during page load im getting both value from server. My client using IE 7. so i didnt able to show progress bar attractive.. any default control in ajax for progress bar ?
Mahesh Bailwal 21-May-13 9:31am    
Ajax is used to get data from server to browser Asynchronous, but in your case you have all the data available to you on page load. I believe here you do not need Ajax based progress bar (as you need not to bring anything from server) but instead you simple, good looking JavaScript/JQuery Progress Bar. Correct me if I am wrong.
Member 13291807 28-Aug-17 5:19am    
var statuscount = $("*[id$=hdnchkstatus]").val();
var statustotal = $("*[id$=hdnchktotal]").val();

Can you tell me from where do you take this varable? I'm using your example but i only need to figure this out and it should work. Thank you

 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900