Suggestion: Dynamic Positioning of UpdateProgress in center/middle of screen

Hello,

I currently have a page that is quite large, so users have to scroll to see all content.
On this page there are several areas where users can add/update content.
Because my page is so large, in respect to its length, users have to scroll down to see all content.

Currently, the updateprogress status stays fixed on the area where it is placed.
It would be good if the updateprogress could position itself in the middle/center of the page/screen, nomatter where the user has scrolled.
The updateprogress would be the top layer of my page, only visible when something is happening.

Currently, I have to add multiple UpdateProgress areas in order for the users to see that something is beeing updated.

I've made a solution myself, where I've added some javscript that dynamically places the updateProgress layer in the center of the page, nomatter what the scrollposition of the page is.

It would however, be nice to see this feature implementet as a part of atlas.

Update: Here is how I positioned the UpdateProgress layer in middle of screen

For those of you who are interested, here is how I did it in order to position the updateProgress in the middle of the screen:

function adjustDivs(){
var df=document.getElementById('<%=UpdateProgress.ClientID %>');
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>

<atlas:UpdateProgress ID="UpdateProgress" runat=server   >
<ProgressTemplate>
<table style="border: 1px solid #000000; " width="300" height="100" id="updateProgressTable" cellspacing="0" cellpadding="0">
<tr>
  <td align="center" bgcolor="#6699FF"><b>
  <font face="Verdana" color="#FFFFFF">Please wait...</font></b></td>
</tr>
<tr>
  <td align="center" bgcolor="#FFFFFF">
  <table border="0" id="table2" cellspacing="4" cellpadding="3">
   <tr>
    <td><img src="~/graphics/icons/spinner.gif" runat=server/></td>
   </tr>
  </table>
  </td>
</tr>
<tr>
  <td align="right" valign="bottom" bgcolor="#FFFFFF">Close</td>
</tr>
</table>
</ProgressTemplate>
</atlas:UpdateProgress>

I'm no javascript guru, so I can't really guarantee that this is the best way to do it, but it works for me.

Re: Update: Here is how I positioned the UpdateProgress layer in middle of screen

Thanks for your help treklipper. I have tweeked your code for my current project. The progress box now appears in the center of the screen even when you scroll.

function adjustDivs(){

var df=document.getElementById('<%=UpdateProgress.ClientID %>');

df.style.position='absolute' ;

df.style.left = (document.documentElement.scrollLeft+45) + '%';

df.style.top = (document.documentElement.scrollTop+300) + 'px';

}

window.onload=adjustDivs;

window.onresize=adjustDivs;

window.onscroll=adjustDivs;

</script>

<atlas:UpdateProgress ID="UpdateProgress" runat=server >

<tr>

<b>

</b>

</td>

</tr>

<tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

</table>

</ProgressTemplate>

</atlas:UpdateProgress>

Re: Update: Here is how I positioned the UpdateProgress layer in middle of screen

rather do this:

Now it works on any resolution and in firefox as well...

Re: Update: Here is how I positioned the UpdateProgress layer in middle of screen

CSTruter

rather do this:

function adjustDivs()
{
   df=document.getElementById('<%=UpdateProgress.ClientID %>');
   dfs = df.style;

   if (window.innerWidth)
   {
      dfs.left = (window.innerWidth - df.offsetWidth) / 2;
      dfs.top = (window.innerHeight - df.offsetHeight) / 2;
   }
   else
   {
      dfs.left = (document.body.offsetWidth - df.offsetWidth) / 2;
      dfs.top = (document.body.offsetHeight - df.offsetHeight) / 2;
   }
}

Now it works on any resolution and in firefox as well...

By the looks of it this should work ok, but in my project df.offsetWidth() always comes out as 0 so the control appears too far the the right.

<atlas:UpdateProgress ID="UpdateProgress1" runat="server">

<tr>

<span style="color: white"><strong>Please wait while we retreive data...</strong></span>

</td>

</tr>

<tr>

<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/ProgressBar4.gif" />

</td>

</tr>

</table>

</ProgressTemplate>

</atlas:UpdateProgress>

Re: Update: Here is how I positioned the UpdateProgress layer in middle of screen

Kinda weird, works perfect for me, would have loved to see what (x)html output it actually renders which could cause this.

Will be something small and not one of Microsoft's dodgy controls.

Re: Update: Here is how I positioned the UpdateProgress layer in middle of screen

Hi,

Thanks for all the above info.I have a problem.I want to show the UpdateProgress in middle of the grid. Just visit http://www.bluenile.com/diamond_search.asp. Click on the search button.On the next page you will see the Progress bar.It is always in center of the grid.Even if I scroll the page while the updation is in progress.How can this be done.

Thanks

Re: Update: Here is how I positioned the UpdateProgress layer in middle of screen

have you looked into the AllwaysVisible control in the Atlas Control Toolkit?

Andy.

Re: Update: Here is how I positioned the UpdateProgress layer in middle of screen

hi,

I have tried it.But It moves as I scroll.I do not want it to move.It should be above the grid while grid is updating.

Re: Update: Here is how I positioned the UpdateProgress layer in middle of screen

You could get the top of the grid by doing a gridObj.offsettop() and position the panel accordingly.

Andy.

Re: Update: Here is how I positioned the UpdateProgress layer in middle of screen

if (window.innerWidth)
   {
      dfs.left = (window.innerWidth / 2 + document.body.scrollLeft);
      dfs.top = (window.innerHeight / 2 + document.body.scrollTop);
   }
   else
   {
dfs.left =(document.documentElement.offsetWidth/2 + document.body.scrollLeft);
dfs.top = (document.documentElement.offsetHeight/2 + document.body.scrollTop);
}
}
window.onload=adjustDivs;
window.onresize=adjustDivs;
window.onscroll=adjustDivs;
</script>

This is the best i used for my projects, works both Mozilla and IE

Re: Update: Here is how I positioned the UpdateProgress layer in middle of screen

I like this solution - looks quite simple..

but how does teh adjustDivs function fire?

I've put it all in and yet it doesn't run?