showing progress bar

  • Thread starter Thread starter Vikas Kumar
  • Start date Start date
V

Vikas Kumar

Hi if I want to show a progress bar in my web application
how can i do it
Like this much % of task has been completed as its shown when installing
some desktop application
i want to do same in my web application
 
Hi,

Vikas said:
Hi if I want to show a progress bar in my web application
how can i do it
Like this much % of task has been completed as its shown when installing
some desktop application
i want to do same in my web application
Click to expand...

You will have to poll the server to get the completion for the current
task, and then update your bar accordingly. To poll the server, use AJAX.

HTH,
Laurent
 
can u give url of any article related to it
i don't have any idea abt it
how to show progress bar
 
Vikas,

you can create a progress bar in this way:

a) have a table with 2 columns. you can set the width of the first column
initially to 0%
e.g <table width=200px><tr><td id="percent" width=0%></td><td> </td></tr>

b) you can use ajax to get the completion percentage and set the width
accordingly.
e.g. document.getElementById("percent").width = "30%"

I have just given the pseudo code of how it can be accomplished.

Regards,
Augustin
http://augustinprasanna.blogspot.com
 
can u give url of any article related to it
i don't have any idea abt it
how to show progress bar
Click to expand...

1) Launch your Internet browser (IE, FireFox, Netscape, Opera etc)

2) Navigate to http://www.google.com

3) Enter the text below in the box:

AJAX "progress bar"

4) Hit the button
 
Hello Vikas,

If what you wonder is just how to display such a progress bar on the web
page, here is a simple example that use javascript and a html <table>
element to display a progress bar:

========================
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
var val;
var tid;
function start_progressbar()
{
val = 0;
tid = window.setInterval("on_progress()", 100);

}

function on_progress()
{
val = val + 10;

document.getElementById("td1").style.width = val;

document.getElementById("label").innerHTML = (val/400 * 100) + "%";



if((val + 10) > 400)
{
window.clearInterval(tid);

val = 0;

alert("matrix loading complete!");
}


}
</script>
</head>
<body onload="start_progressbar();">
<form id="form1" runat="server">
<div >
<table id="bar" cellpadding="0" cellspacing="0"
style="width:400;height:50;border-style:solid;border-width: 1;
border-color: black" >
</td><td id="td2"></td></tr>
Click to expand...
</table>
<div id="label" >0</div>
</div>
</form>
</body>
</html>
=================================

also, you can find more web articles provide some more complex and nice
dhtml/script based web page progress bar:

#DHTML Progress Bar Widget using JavaScript and CSS
http://www.wingo.com/dhtml/ProgressBar.html

http://www.eggheadcafe.com/articles/20010610.asp

http://www.java2s.com/Code/JavaScript/Development/Javascriptprogressbar.htm

In addition, as Laurent has said, if you want to integrate the progress bar
with some server-side operations' progress, we need to take care of other
things when implement the code logic communicate between client and server.


Please feel free to post here if you have anything unclear.

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead



==================================================

Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications.



Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.

==================================================



This posting is provided "AS IS" with no warranties, and confers no rights.
 
Back
Top