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.
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.
<script language="JavaScript">
function adjustDivs(){
var df=document.getElementById('<%=UpdateProgress.ClientID %>');
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
Dont forget to click “Mark as Answer” on the post that helped you.
This credits that member, earns you a point and mark your thread as Resolved for the sake of Future Readers.
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.
Dont forget to click “Mark as Answer” on the post that helped you.
This credits that member, earns you a point and mark your thread as Resolved for the sake of Future Readers.
treklipper
Member
57 Points
13 Posts
Suggestion: Dynamic Positioning of UpdateProgress in center/middle of screen
Apr 09, 2006 06:09 PM|LINK
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.
treklipper
Member
57 Points
13 Posts
Update: Here is how I positioned the UpdateProgress layer in middle of screen
Apr 09, 2006 08:40 PM|LINK
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:
<script language="JavaScript">
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.
cryeman
Member
5 Points
1 Post
Re: Update: Here is how I positioned the UpdateProgress layer in middle of screen
Jun 13, 2006 04:58 PM|LINK
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.
<script language="JavaScript">
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 >
<ProgressTemplate>
<table width="200" style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;" height="75" id="updateProgressTable" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor=darkblue>
<b>
<font face="Verdana" size=2pt color="#FFFFFF"><asp:Label ID=lblmessage runat=server Text="Please wait..."></asp:Label></font>
</b>
</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF">
<table border="0" id="table2" cellspacing="4" cellpadding="3">
<tr>
<td><img id="Img1" src="~/images/icon-loading.gif" runat=server/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right" valign="bottom" bgcolor="#FFFFFF"></td>
</tr>
</table>
</ProgressTemplate>
</atlas:UpdateProgress>
CSTruter
Member
26 Points
7 Posts
Re: Update: Here is how I positioned the UpdateProgress layer in middle of screen
Jun 20, 2006 08:32 AM|LINK
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...
andymarks
Member
367 Points
83 Posts
Re: Update: Here is how I positioned the UpdateProgress layer in middle of screen
Jun 23, 2006 02:17 PM|LINK
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"> <ProgressTemplate> <table class="tblData" > <tr> <td colspan="2"> <span style="color: white"><strong>Please wait while we retreive data...</strong></span> </td> </tr> <tr> <td colspan="2"> <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/ProgressBar4.gif" /> </td> </tr> </table> </ProgressTemplate> </atlas:UpdateProgress>CSTruter
Member
26 Points
7 Posts
Re: Update: Here is how I positioned the UpdateProgress layer in middle of screen
Jun 25, 2006 07:12 PM|LINK
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.
Deepesh
Member
569 Points
130 Posts
Re: Update: Here is how I positioned the UpdateProgress layer in middle of screen
Aug 03, 2006 03:50 PM|LINK
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
This credits that member, earns you a point and mark your thread as Resolved for the sake of Future Readers.
andymarks
Member
367 Points
83 Posts
Re: Update: Here is how I positioned the UpdateProgress layer in middle of screen
Aug 04, 2006 09:34 AM|LINK
have you looked into the AllwaysVisible control in the Atlas Control Toolkit?
Andy.
Deepesh
Member
569 Points
130 Posts
Re: Update: Here is how I positioned the UpdateProgress layer in middle of screen
Aug 04, 2006 10:12 AM|LINK
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.
This credits that member, earns you a point and mark your thread as Resolved for the sake of Future Readers.
andymarks
Member
367 Points
83 Posts
Re: Update: Here is how I positioned the UpdateProgress layer in middle of screen
Aug 04, 2006 10:27 AM|LINK
You could get the top of the grid by doing a gridObj.offsettop() and position the panel accordingly.
Andy.