UpdateProgress Position in middle of screen

Hi,

I have various updatepanels on the same page. I want to have 1 updateprogress on the same page and depending on which updateprogress is updating that the updateprogress move to the middle of the updateprogress that is updating. The following code below allows me to position the updateprogress in the centre of the page but when the the page is scrolled down the updateprogress doesn't move its position appropriately.

Can anyone help?

I have inspected the values of the document.body.scrolltop and it is always at 0. How can change the position of the updateprogress when the user scrolls the page?

<

scriptlanguage="javascript"type="text/javascript">

function

adjustDivs(){var df=document.getElementById("updateprogressdiv");

df.style.position=

'absolute' ;

df.style.left =document.body.offsetWidth/2 + document.body.scrollLeft -150;

df.style.top = document.body.offsetHeight/2 + document.body.scrollTop -50;

}

window.onload=adjustDivs;

window.onresize=adjustDivs;

window.onscroll=adjustDivs;

</

script>

did you ever figure how to make the updateprogress display in the center of the page even when you scroll the page down

or does anybody have any other ides on how to make this happen

hello.

you can easilly do that with the AllwaysVisibleControlExtender available on the atlas toolkit.

Hi,

I've come up with some DHTML to always center the animated gif on your screen, AS WELL AS disable all elements by throwing a transparent IFRAME z-indexed to the top. Keep in mind that I have NOT tested this with other browsers, only in IE6. If anyone wants to cross-browser/cross-platform modify it, be my guest.

<atlas:UpdateProgressID="uppMain"runat="server">

<ProgressTemplate>

<iframeframeborder="0"src="about:blank"

style="border:0px;position:absolute;z-index:9;left:0px;top:0px;width:expression(this.offsetParent.scrollWidth);height:expression(this.offsetParent.scrollHeight);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=75, FinishOpacity=0, Style=0, StartX=0, FinishX=100, StartY=0, FinishY=100);"></iframe>

<divstyle="position:absolute;z-index:10;left:expression((this.offsetParent.clientWidth/2)-(this.clientWidth/2)+this.offsetParent.scrollLeft);top:expression((this.offsetParent.clientHeight/2)-(this.clientHeight/2)+this.offsetParent.scrollTop);">Please Wait...<br/><imgsrc="/_images/statusbar.gif"/></div>

</ProgressTemplate>

</atlas:UpdateProgress>

Works Perfect....Thanks for the code...

Okay... dude... that "left: expression((t..." line is absolute GENIUS!!! I had NO idea that you could do that! It even works in a stylesheet!

You are the MAN! Unless you're a girl, in which case you're... well, still the man! :D

Seriously, you guys couldn't have bumped this thread a couple hours ago? I just finished my own attempt at using UpdateProgress to disable page controls... and yours is better. :(

Umm,

I was under the impression that CSS "expression" is not standard. I know it works in IE, but does it work in Firefox. I know we've had problems before, because I don't think Firefox recognizes it. I could be wrong, though. You might want to cross-browser test it.

Hi guys/gals,

Tadmeister's introduction of Javascript within CSS was absolutely brilliant i thought also. So along with some help from another article on some Javascript i decided to do some customisation of my own. But instead of using an iframe (if anyone has a problem with it), I used a Panel for the overlay and another Panel within it for the "loading..." text. Here is a snippet in case anyone wants to try it out. I've tested it and it works nicely in Firefox2 & IE7, but IE6 gave me some problems with the vertical positioning. I used a hack for IE6, and anyone is welcome to improve on it!

<ajax:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<asp:Panel ID="Panel1" CssClass="overlay" runat="server">
<asp:Panel ID="Panel2" CssClass="loader" runat="server">
Loading...
</asp:Panel>
</asp:Panel>
</ProgressTemplate>
</ajax:UpdateProgress>

and the CSS for it:

.overlay {
position: fixed;
z-index: 99;
top: 0px;
left: 0px;
background-color: #FFFFFF;
width: 100%;
height: 100%;
filter: Alpha(Opacity=70);
opacity: 0.70;
-moz-opacity: 0.70;
}
* html .overlay {
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
width: expression(document.body.scrollWidth > document.body.offsetWidth ? document.body.scrollWidth : document.body.offsetWidth + 'px');
}
.loader {
z-index: 100;
position: fixed;
width: 120px;
margin-left: -60px;
top: 50%;
left: 50%;
}
* html .loader {
position: absolute;
margin-top: expression((document.body.scrollHeight / 4) + (0 - parseInt(this.offsetParent.clientHeight / 2) + (document.documentElement && document.documentElement.scrollTop || document.body.scrollTop)) + 'px');
}

Yea, I know...the margin-top expression for IE6 is not the best, but if someone can make it work properly, be my guest. Alternatively check out: www.codeproject.com/ajax/modalupdateprogress.asp for Ting Huang's custom ajax extender.

Cheers!
Shalan99

Is there a way to get this to cover only a div or something? I have some web parts that do updates, and would like it to be centered within those, but I can't get that to work.

Hi Sarvis,

There are ways to achieve this. Raj Kaimal has a great bunch of control/extenders...one of which does what u want it to do, minus centering it in the associated control itself. Check it out @.: http://weblogs.asp.net/rajbk/archive/2007/01/08/using-the-updateprogress-control-as-a-modal-overlay.aspx

Another way to do this jus came to mind, but let me test it out first before i post any code.

Cheers!

Thank you very much. Great post. Tadmeister

Hi Tadmeister,

I implemented above code it worked, but receiving CSS validation is not valid for property left/top. How do I avoid receiving these error in .aspx page.

Please help...

Thanks for that, works fine