Always Centered AJAX Progress Indicator

In an earlier post I mentioned my struggle with the ProgressUpdate control. In many situations it would be helpful to place the progress indicator right in the middle of the page so users always have an idea something is happening. The problem with this is, well, Internet Explorer < 7 .0 which treats lists (dropdowns, list boxes) as windowed controls, so they always show on top of other HTML elements.

When Shane Shepherd posted a couple of links to workarounds, it all came full circle. I ended up writing an extender control which attaches to any ASP.NET control and centers it dead-center during an AJAX callback. The included sample uses an animated glyph lifted from here but you’re free to use whatever you want.

I had a chance to test this in IE 6, Firefox and Opera. I don’t have Safari at the moment. Download the source code here and simply open CenteredProgressIndicatorTest in Visual Studio as a web site.

Updates

Read Aug 3, 2007, follow-up.

Milan, thanks for this. What a great help.

For my case, I wanted a slightly different behavior. I modified your control to have the option of centering over the page or over a specified control. If you're interested, I'd be happy to e-mail the changes to you. (I've gotta get a web site put together one of these days.)

Very cool! Sure, if you wish, email it to me and I'll post it here with all the due attribution.

I've just downloaded the zip file - but how do I get it working with Vis Web Dev 2005 Express?
JJP

Milan, did you ever receive the source code that Don created? I'm in need for a progress indicator that covers the control/element that is updating. I'm puzzled why not a lot of other people seem to want this and that the MS AJAX team hasn't made it.
I will try to take your source and see if I can modify it to create the behavior I want. If I succeed, I will email it to you.

Marijn, no, I haven't. However, take a look at this post where I've done this by hand. Hope it helps.

Great control, but I would like to move the control up to the top. How can I do this?

Thank you!

Can you clarify to the top of what? If it's the browser view port we're talking about, it'll take a minor tweak in the CSS to position it absolutely at (0, 0).

Yes, I was thinking the top of the page in the browser.

Are you talking about this css?
.progress_indicator img
{
padding: 10px;
border: solid 0px #aaaaaa;
background: white;
margin-top:50;
}

The really quick and dirty way is to replace the last line in _beginRequest with this:

Sys.UI.DomElement.setLocation (progressContainer, 0, 0);

Where do I find _beginRequest ?

You'll find it in CenteredProgressIndicator.js. You will need to recompile the control.

On the second thought, as an even quicker fix without compilation, add this CSS rule to your web page:

.select_free__ {
top: 0 !important;
left: 0 !important;
}

Thanks, I was just using the precomplied dll. Thank you for all your help it is fantastic!

One more question. I am using your control in my search screen and when I display the results I have a link to go to the detail. However, when I use my back button my search results are cleared out. How can I make it so when a users searches, displays results, then clicks on detail then decides they want to use the back button the results are still in the gridView. Right now it is clearing it out or hidding it.

That's the downside of using AJAX in the first place. Look at this post by Scott Guthrie. There's a link to Nikhil's UpdateHistory control there.

Milan, thanks a ton for sharing this tool!

It worked great the way it is... but I was looking to have a Gmail like indicator that would show up at the top-center of the browser window. I updated _beginRequest function to set 'Y' to 'scrollY' and remove the math to calculate the vertical center of the browser window.

Now I have a gmail like progress indicator.

Thanks again!