ajax progress indicator

rubyonrails-talk
1

Hi all,

This might be more a html question than a rals one...

I have a link that user link_remote_to. When a user clicks that link I want to hide it and show a progress indicator in that same place.

I tried to do this with 3 spans: <ul> <li>   <span class="container">    <span id="indicator_1"></span>    <span id="link_1">ajax link here</span>   </span>   text here </li> </ul>

The problem is that I cannot give the span a width so the 'text here' always moves when the link is clicked since the indicator has a smaller size than the link.

how do you people solve this?

thanks Stijn

2

divs

3

divs don't work since I need to present data in a row. A div is not an inline element.

4

Here's an example with inline styles.

<ul style="list-style:none;">   <li style="float:left;clear:left;; margin: 4px;">       <div id="link_1" style="width: 10em;float:left;background:yellow;">ajax link1 here</div>       <div id="indicator_1" style="width: 10em;float:left;display:none;">Indie</div>       <div style="float:left;clear:right;">Text here</div>   </li>   <li style="float:left;clear:left; margin: 4px;">       <div id="link_2" style="width: 10em;float:left;display:none;">ajax link2 here</div>       <div id="indicator_2" style="width: 10em;float:left;background:red;">Indie</div>       <div style="float:left;clear:right;">More text here</div>   </li> </ul>

Sorry that the colors are ugly; it's an easy way to see that the items are the same width. Technically you don't need the styling on the first li, but it is obviously easier to include it (e.g., partial) than code around it.