Question

I have making an AJAX wizard using JQuery and I’m trying to get the top navigation indicators to work properly. So far I have this:

I’m trying to extend the line when the user pushes “Next Step”.

What I would really like is to have it animate to the next step. My initial approach is to have the light gray line just a “border” property of the “ol” property, and then have a normal “img” tag right after the ol and set these CSS properties on the image (which is an image of a small orange line):

{
position:absolute;
margin-top:-37px;
margin-left:-3px;
height:13px;
width:400px;
}

So I have a “Proceed” function which fades out the current step and fades in the next step. This is all working great. I was thinking I could increase the width of this orange line (using “animate” but the problem is it goes over the Step indicater (the little “o”) like this:

Is there a better way of doing something like this?

I know it’s nit picky little issue, but any advice would really help!

Thank you

UPDATE: By the way, I forgot to add that I have many of these wizards with any different number of steps, so if I did it the way I’m trying to do it, I would need to find the length of width between each step, which would be a lot of work. But if it’s the only way, then I can do this

Answer 1

See this fiddle where next extends the orange bar: http://jsfiddle.net/maniator/AS63L/

What you need to do is than on each next you remove the appropriate bubble.

---

Here is an updated fiddle that does it step by step: http://jsfiddle.net/maniator/AS63L/5/