Need Progress Bar

[metrov]

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

[orion_rus]

You can make a progress bar from <tr> tag
tr would have a border wth 1 px black. 1 td would be a filled progress (background blue) 2 td would be a transparent progress (background transparent). With javascript you can chage it's width sizes) and t would be like dinamyc progress bar. I hope you understand me:
All your progress bar would be following:
<tr style='border:1px solid #000000'><td style='background-color:#0000FF;border:1px solid #000000;width:40px'>40%</td><td style='background-color:transparent;border:1px solid #000000;width:60px'>60%</td></tr>
and by this you get a progress bar 40% filled
Good luck to you

[metrov]

Well, I tried your code, and it works. But is there more to it? Because it seems I would have to write the code manually for each page. Is there a way to make it dynamic with JS?

I'm thinking in order to be truly dynamic, i.e. changes according to the users actions, it may have to be done in ASP or something.

Thanks

[orion_rus]

ok you have this:(copy it);
<table><tr id='newtable' style='border:1px solid #000000'><td style='background-color:#0000FF;border:1px solid #000000;width:40px'>40%</td><td style='background-color:transparent;border:1px solid #000000;width:60px'>60%</td></tr> </table>

to change a progressbar with javascript u need in a head:
function changeprogress(newprocent)
{newtr=document.getElementById('newtable');
newtr.childNodes[0].innerHTML=newprocent+'%';
newtr.childNodes[0].style.width=newprocent+'px';
newtr.childNodes[1].innerHTML=eval(100-newprocent)+'%';
newtr.childNodes[1].style.width=eval(100-newprocent)+'px';
}

in a body:
<script>
changeprogress(20); //to set 20 percent progress
</script>

good luck to you

[metrov]

So does this code mean that each time a new page comes up [with this code in it] the bar will progress 20%? And I don't have to manually change the percentage in each individual page?

[orion_rus]

No this means following:
you can dinamycally change the percentage of progressbar
with any events you can make two images and with mouseover change percentage
<img src='a.jpg' onmouseover=changeprogress(20) />
<img src='b.jpg' onmouseover=changeprogress(50) />
You can set's any events and dinamycally chenge value of percents
Good luck to you

[metrov]

I'm sorry, I'm not a expert at JavaScript, but I don't believe this can be a mouseOver effect if I understand you correctly. The user must simply click the NEXT button and go the the next page. When that happens, the Progress Bar on the next page must show a 10% higher percentage than the previous page.

I don't know how this would be possible with JS, it seems like this is something the server would have to keep track of meaning it must be done in ASP or some other serverside language.

Please tell me if I'm wrong. Thank you.

[metrov]

How will the NEXT page know where the percentage bar was on the PREVIOUS page? The information has to be sent from one page to the other. Is this possible with JS?

[orion_rus]

you can make call location.href='index.php?percantage=60' and get this percentage by analysing in a server side or in a client side to undesrtand what percantage is needed
Good luck to you

[orion_rus]

server side languages makeing for server side, but mouseover effect is make for client side, when user mouseovers something, and this is a Javascript. It's very short number of pages what uses javascript to make this, but the most common use of javascript is a drop down menu. I think you see it in the different sites - it's javascript
Good luck to you