JavaScript Forum

**metrov** · 04-30-2005, 12:14 AM

Hi,

I want to create a 'Progress Bar' similar to the one found on legalzoom.com. If you go to legalzoom.com, and chose a legal document to fill out [just create a fake email address and password to get in], you'll see a Progress Bar at the top of each page. There are many different choices in the course of filling out any particular document, so the total number of pages will vary from customer to customer. So the Progress bar must be dynamic, to show the client how many forms he has left to fill out. Still it's only an approximation of the client's progress, but this will be good enough for my needs.

Does anyone know how this is done? I'm not sure if it's done in JavaScript or ASP. If you look at the source code, or download the progress bar image, you'll see it's a very small .gif, that is added and added as progress is made, I think. It looks like JavaScript, but I'm not positive.

Any guidance on this matter would be much appreciated. A tutorial somewhere, maybe?

Thanks very much

**Steven Chang** · 02:56 PM

Can you give me a link to the bar?

There are many ways to make a bar. You can use java, javascript: http://javascript.internet.com/messa...gress-bar.html

Steven Chang

**metrov** · 04-30-2005, 03:16 PM

The link you provided is not what I'm looking for.

You can try this link:

https://www.legalzoom.com/html/QPage...268&iQ=59&iP=1

If that doesn't work, please just go to www.legalzoom.com, then chose LIVING TRUST DOCUMENT...then you have to log in [use fake email and password], next you'll see the Progress Bar I need to make.

But the bar should be dynamic, i.e. determined by the user's actions.

Thanks a lot

**Steven Chang** · 07:00 AM

Ah I see, the bar is a simple table with images. The first image, label_progress_progressbar.gif, is the image containing the text "PROGRESS BAR >>". The other images are for helping the bar look better. label_progress_status.gif is the picture that controlls the length of the orange status bar. To modify the length of the bar you should change the width of the image.

<TABLE WIDTH=527 HEIGHT=13 CELLPADDING=0 CELLSPACING=0>

<TR>
<TD ROWSPAN=3 HEIGHT=13>

<IMG SRC="https://www.legalzoom.com/images/label_progress_progressbar.gif" height=13 width=100></TD><TD HEIGHT=1 WIDTH=427>

<IMG SRC="https://www.legalzoom.com/images/label_progress_topborder.gif" height=1 width=427>

</TD>
</TR>

<TR>
<TD bgcolor="#cccccc" align=left HEIGHT=8 WIDTH=427>

<IMG SRC="https://www.legalzoom.com/images/label_progress_status.gif" height=8 width=39>
</TD>
</TR>

<TR>
<TD WIDTH=427 HEIGHT=4>

<IMG SRC="https://www.legalzoom.com/images/label_progress_ticks.gif" width=427 HEIGHT=4>

</TD>
</TR>

</TABLE>

Well, there is no copyright sign there... so copying stuff from their site should be legal. (I think)

Change the width:

<IMG SRC="https://www.legalzoom.com/images/label_progress_status.gif" height=8 width= X

>

X = the width in pixels of the progress bar.

Now, to make the thing dynamic you could use javascript or a server based script, such as PHP.

example progress.php:

progress.php

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE WIDTH=527 HEIGHT=13 CELLPADDING=0 CELLSPACING=0>

<TR><TD ROWSPAN=3 HEIGHT=13><IMG SRC="https://www.legalzoom.com/images/label_progress_progressbar.gif" height=13 width=100></TD><TD HEIGHT=1 WIDTH=427><IMG SRC="https://www.legalzoom.com/images/label_progress_topborder.gif" height=1 width=427></TD>
</TR>
<TR>
<TD bgcolor="#cccccc" align=left HEIGHT=8 WIDTH=427><IMG SRC="https://www.legalzoom.com/images/label_progress_status.gif" height=8 width=
<?

$X = $_GET["X"];

echo $X;
?>
></TD></TR>
<TR><TD WIDTH=427 HEIGHT=4><IMG SRC="https://www.legalzoom.com/images/label_progress_ticks.gif" width=427 HEIGHT=4></TD></TR>

</TABLE>
<A href = "progress.php?X=30">Start over with filling my form.</A>
<BR>
<A href = "progress.php?X=150">Please go to the second part of the form.</A>
<BR>
<A href = "progress.php?X=300">I only want to fill in the important details, skip the optional part.</A>
<BR>
<A href = "progress.php?X=425">Please submit my form now, I am done.</A>
<BR>

</BODY>
</HTML>

good luck,

Steven Chang

**metrov** · 05-01-2005, 04:18 PM

Thanks very much, Steve. I'll have to experiment with this. [for some reason I did not receive email notification that you had answered]

**Jared** · 05-06-2005, 09:02 PM

A small comparison between server side scripts and javascript:

PHP/CGI: Everyone can view it, browser screwups are impossible. Downside being that there really isn't a way to make changes on the page without refreshing it (correct me if I'm wrong there).

Javascript: Changes can be made on the webpage without having to refresh it. Faster. Downside being that you'll lose sleep over configuring the scripts to work with all browsers.

**Minaki** · 05-07-2005, 07:43 AM

Quote:

Downside being that there really isn't a way to make changes on the page without refreshing it (correct me if I'm wrong there).

Yet another reason to ditch PHP/ASP and move to ASP.NET.

ASP.NET implements Postbacks, where the page is posted back to itself. Yes, it refreshes the page, but it's very quick due to the excellent use ASP.NET makes of caching, and various other things such as the fact that it's a compiled language, which has huge speed benifits over a scripted one.

For validation, ASP.NET can also generate some javascript so certain validators don't have to be posted back every time. It will handle the browser sniffing, etc. for you and will also always still validate things server side as well just in case someone doesn't have JavaScript (and for security). All in all it's very flexible and very fast (both in terms of development and processing

)

**Kaiman** · 05-07-2005, 11:15 PM

Minaki,

You can use certain PHP functions to do the same kind of "postbacks" that you mentioned. The other thing about PHP is that it runs on all Linux servers which make up about 75 percent of the market, while ASP and ASP.NET will only run on Windows boxes which are about 17 percent and cost alot more.

Kaiman

Website Design and Hosting - Glenwood Springs, CO