Always Centered AJAX Progress Indicator
Posted in Development
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
16 comments
Milan Negovan
on June 6, 2007
Very cool! Sure, if you wish, email it to me and I'll post it here with all the due attribution.
JJP
on June 12, 2007
I've just downloaded the zip file - but how do I get it working with Vis Web Dev 2005 Express?
JJP
Marijn Eken
on August 3, 2007
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.
Milan Negovan
on August 3, 2007
Marijn, no, I haven't. However, take a look at this post where I've done this by hand. Hope it helps.
Badger
on August 10, 2007
Great control, but I would like to move the control up to the top. How can I do this?
Thank you!
Milan Negovan
on August 10, 2007
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).
Badger
on August 10, 2007
Yes, I was thinking the top of the page in the browser.
Badger
on August 10, 2007
Are you talking about this css?
.progress_indicator img
{
padding: 10px;
border: solid 0px #aaaaaa;
background: white;
margin-top:50;
}
Milan Negovan
on August 10, 2007
The really quick and dirty way is to replace the last line in _beginRequest with this:
Sys.UI.DomElement.setLocation (progressContainer, 0, 0);
Badger
on August 10, 2007
Where do I find _beginRequest ?
Milan Negovan
on August 10, 2007
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;
}
Badger
on August 10, 2007
Thanks, I was just using the precomplied dll. Thank you for all your help it is fantastic!
Badger
on August 10, 2007
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.
Milan Negovan
on August 14, 2007
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.
Puneet
on April 23, 2008
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!
Don
on June 5, 2007
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.)