Problem: Design the update progress html and css so that the entire page is overlaid with gray background. This works pretty good until scrolling on the page is involved. When the page is tall enough that the browser scrolls the overlay must by sized dynamically with each post. If you fail to do this, you will end up with odd visual with the overlay only covering a portion of the page.
I was using the UpdatePanel control which enables you to build rich, client-centric web applications. By using the UpdatePanel controls you can refresh selected parts of the page instead of refreshing the whole page with a postback. While the partial page post back occurs an UpdateProgress control is available to provide the user with a friendly ‘please wait’ message. This all works seamlessly out of the box.
In my scenario I needed to overlay and disable all controls (make unavailable) for the user while the partial page update happens. The application allows for file uploads (which cannot participate in partial page updates). A full post back must occur for this to work correctly.
My ASPX page has the following structure with typical UpdatePanel, ContentTemplate, Triggers and UpdateProgress controls. The trigger designates that the btnSubmitAdmin will perform a full postback. I want the full postback user interaction to look similar as the partial page updates. As a result, I will be using the same updateprogress visual for both partial and full postbacks.
As you can see above the updateprogress has a user control WaitPanel. It is this html/css that will be shown when the user performs a postback. The WaitPanel is registered at the top of the page.
So far I have shown the aspx code and the code that displays the please wait message. When this is displayed I am using CSS to overlay a gray and place ‘please wait..’ in the forefront.
As it stands right now when a partial page update is performed the ‘please wait’ message will be shown in the forefront with gray background on the complete page.
Here you will notice a call to ShowWait(‘UpdateProgress1’); This function is within the Wait.js file that was included with the user control.
The big issue that remains is to have the overlay cover the entire browser window independent of any scrolling. This was an problem. Without this adjustment after the user scrolled down half the page and performed any sort of postback the gray overlay was only shown on a portion of the page leaving a very ugly user interface.
The following is my complete Wait.js file which you can see sizes the overlay and positions the wait message.
While writing this post, I recognized that there was a nice feature that I would like to include. Currently, the gray overlay covers the entire browser window. I would like modify so that I can pass in the container object. By doing this I could use in smaller portions on the page quite easily.
This is quite easily moved between projects which was one of my goals with this solution. If you have any comments or improvements please let me know.