Yet another UpdateProgress Post. Height and Width Problems and Screen Center.

Maybe we can help each other. I ran into the same issue you have now about 4 months ago. I figured out the problem much the same way the modalPopup does. Divs are the way to go instead of a table. Below is the code that I have implemented. The only problem is that on the first updatepanel load it doesn't put the loading DIV in the center. On the second load or if the page is resized or scrolled it centers immediately. Obviously becaue of the window.resize .scroll and .onload but it doesn't work onload... oh well it does work for what you want.

Source Code:

<script language="JavaScript" type="text/JavaScript">
<!--
function adjustDivs()
{

var df=document.getElementById('progTemplate');
var foreItem=document.getElementById('progDisplay');
var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
var clientWidth;
if (window.innerWidth) {
clientWidth = (window.__safari ? window.innerWidth : Math.min(window.innerWidth, document.documentElement.clientWidth));
} else {
clientWidth = document.documentElement.clientWidth;
}
var clientHeight;
if (window.innerHeight) {
clientHeight = (window.__safari ? window.innerHeight : Math.min(window.innerHeight, document.documentElement.clientHeight));
} else {
clientHeight = document.documentElement.clientHeight;
}
df.style.position='absolute';
foreItem.style.position='absolute';
df.style.left = scrollLeft + 'px';
df.style.top = scrollTop+'px';
df.style.width = clientWidth+'px';
df.style.height = clientHeight+'px';
foreItem.style.left = scrollLeft+((clientWidth-foreItem.offsetWidth)/2)+'px';
foreItem.style.top = scrollTop+((clientHeight-foreItem.offsetHeight)/2)+'px';

}
window.onload=adjustDivs;
window.onresize=adjustDivs;
window.onscroll=adjustDivs;
//-->
</script
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="0" runat="server">
<ProgressTemplate>
<div id="progTemplate" style="z-index: 10000;" class="transBG"></div>
<div id="progDisplay" style="z-index: 10001; width: 200px; height: 75px; border-right: buttonshadow 2px solid;
border-top: buttonshadow 2px solid; border-left: buttonshadow 2px solid; border-bottom: buttonshadow 2px solid;
background-color: #ffffff; text-align:center;">
<br />
<span style="font-size: 10pt; color: #929292;font-family: Arial;">
<img src="http://pics.10026.com/?src=images/progress_bar.gif" /><br />
<strong>Processing Request</strong>
</span>
</div>
</ProgressTemplate>
</asp:UpdateProgress
Try it out.

I believe the only major browser the alpha CSS doesn't work is Opera not sure about Safari.

Let me know how it works out for you.

Thanks,
JoeWeb

This script works really well actually, it was just what I was looking for.

I see what you mean about first time it doesn't center properly, it adjust on scrolling for me. I was trying to add a OnClientClick on a button and call your adjustdivs but doesn't seem to work. Maybe calling the function when it loads the first time, let me see if I can fix.