RadAjaxLoadingPanel centered in my page

[Sabrina]

Hello,

I want to center the radAjaxLoadingPanel in my browser (adaptable to the size of the window).

I try to do something like that :

<telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel" runat="server" Transparency="20" BackColor="#E0E0E0">
    <img src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading6.gif") %>'
            alt="Loading..." style="margin: 383px 500px 383px 500px" />
</telerik:RadAjaxLoadingPanel>

When this is the radajaxmanager that starts the radajaxloadingpanel, it is almost centered...
but when this is another control in the page that starts the radajaxloadingpanel, it is not centered at all.

How can I do that ?

Thanks,

Sabrina

[Dimo]

Hello Sabrina,

Please consult our documentation:

http://www.telerik.com/help/aspnet-ajax/ajxcenterloadingpanel.html

http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-make-a-radajaxloadingpanel-span-over-the-whole-page.aspx

Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Naga]

Thanks for your solution,
I used this code to span the loading panel over the full page.
i also set Transparency as "30" and background color as "Gray".
its working fine for the pages which have minimal height(around 1000px) but if the page height increases to around 4000 px, the transparency is not working. the loading panel is occupying the full page with gray color.
and this problem continues even though i reduce the page size.
please find the code snippet below.
Could someone please take a look and provide any solution to my problem?
i would greatly appreciate your help.


loading panel:
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" IsSticky="true" Runat="server"
     InitialDelayTime="200" MinDisplayTime="5" style="position:absolute;top:0;left:0" Width="100%" Height="100%"
    Transparency="30" BackColor="Gray" >
    <table width="170px"  style="position:relative; height:300px;  top:274px">
    <tr>
    <td align="center"><div style="background-color:White;  color:Black;">
    <img  alt="Loading..."
        src="wetr.gears.ani.gif"   
        style="border:0px;" />&nbsp;<br />Retrieving data...</div>
        </td>
        </tr>
        </table>
</telerik:RadAjaxLoadingPanel>

onRequestStart event:-
function onRequestStart(sender, arguments) {

var pageHeight = document.documentElement.scrollHeight;
             var viewportHeight = document.documentElement.clientHeight;

             if (pageHeight > viewportHeight) {
                 $get("<%= RadAjaxLoadingPanel1.ClientID %>").style.height = pageHeight + "px";
             }
        
             
             var scrollTopOffset = document.documentElement.scrollTop;
             var loadingImageHeight = 55;

             $get("<%= RadAjaxLoadingPanel1.ClientID %>").style.backgroundPosition = "center " + (parseInt(scrollTopOffset) + parseInt(viewportHeight / 2) - parseInt(loadingImageHeight / 2)) + "px";

         }

Thanks much, Naga

[Dimo]

Hello Naga,

I tried your code and the transparency worked as expected, no matter the length of the page. However, the background positioning code does not do anything, becase you are not using a background image:

$get("<%= RadAjaxLoadingPanel1.ClientID %>").style.backgroundPosition = "center " + (parseInt(scrollTopOffset) + parseInt(viewportHeight / 2) - parseInt(loadingImageHeight / 2)) + "px";


Please change the loading image inside that table to a background image of some element. Actually, you don't need that table at all. I recommend you to review the code library example in my previous post and implement it in your application in the same way.

Alternatively, you can leave the image as is and set its top and left styles, instead of the background position, but I don't think this is a better or simpler approach.

Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Manuel Ortiz]

Hello, I have the exact same problem as Naga in terms that "the loading panel is occupying the full page with gray color".  However, I have realized that the problem only happens in Windows 7's IE8.  I use the http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-make-a-radajaxloadingpanel-span-over-the-whole-page.aspx demo code and it works perfectly everywhere except in a page I have that is more than 4000px of height.  I don't know if I'm missing something in the code or if it is something with that version of IE.  Another thing worth noting is that a week ago it worked perfectly and now it doesn't, so it could be some kind of crazy Microsoft update.  

Here is the code I use:

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Black">
  </telerik:RadAjaxLoadingPanel>

  <telerik:RadAjaxLoadingPanel ID="pageLoadingPanel" runat="server"
        CssClass="fsLoadingPanel" Transparency="5" IsSticky="True" InitialDelayTime="500"
        BackgroundPosition="None" BackImageUrl="~/images/greenblackloader.gif"
        EnableEmbeddedSkins="False" Skin="Black">
    </telerik:RadAjaxLoadingPanel>

[Dimo]

Hello Manuel,

Unfortunately, this seems to be a browser / system limitation:

http://stackoverflow.com/questions/775041/ie-display-transparency-bug-on-height-4096px

All the best,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Manuel Ortiz]

Hi, I partially solved the issue editing the full page loading panel code to check when the page is more than 4000px in height, when it does, it generates the loading panel and image only on the portion of the browser viewport visible to the user achieving the desired effect.  In fact, the fixes I did on the code work with all browsers.  Here is the code:

// the following function code takes care of expanding the RadAjaxLoadingPanel
// to the full height of the page, if it is more than the browser window viewport.
function RequestStart(lpClientId) {

        var loadingPanel = $get(lpClientId);
        var pageHeight = document.documentElement.scrollHeight;
        var viewportHeight = document.documentElement.clientHeight;
        var scrollTopOffset = document.documentElement.scrollTop;

        if (pageHeight > viewportHeight) {
            if (pageHeight > 4000) { //**ONLY FOR IE: if page height is more than 4000px strange loading panel behaviour appears so only leave the loading panel's height equal to viewportHeight.
                loadingPanel.style.top = scrollTopOffset + "px";  //and put its top portion offset by scroll.
                scrollTopOffset = 0; //empty offset so that background picture loads on the exact center of the panel.
            }
            else {
                loadingPanel.style.height = pageHeight + "px"; //if pageheight is lower than 4000 do everything normally.
            }
        }

        // the following Javascript code takes care of centering the RadAjaxLoadingPanel
        // background image, taking into consideration the scroll offset of the page content

        var loadingImageHeight = 55;

        loadingPanel.style.backgroundPosition = "center " + (parseInt(scrollTopOffset) + parseInt(viewportHeight / 2) - parseInt(loadingImageHeight / 2)) + "px";

        // workaround for RadAjaxLoadingPanel for ASP.NET - there are two elements with the same ID
        // this is not needed with RadAjaxLoadingPanel for ASP.NET AJAX

        if (loadingPanel.nextSibling.className == loadingPanel.className) // IE, Opera
        {
            loadingPanel.nextSibling.style.backgroundPosition = "center " + (parseInt(scrollTopOffset) + parseInt(viewportHeight / 2) - parseInt(loadingImageHeight / 2)) + "px";
        }
        else if (document.getElementsByClassName) // Firefox, Chrome: For these browsers do everything normally.  So the changes made for IE have to be rolled back.
        {
            scrollTopOffset = document.documentElement.scrollTop;
            var panels = document.getElementsByClassName("fullPageLoadingPanel");
            for (var j = 0; j < panels.length; j++) {
                panels[j].style.top = 0 + "px";
                panels[j].style.height = pageHeight + "px";
                panels[j].style.backgroundPosition = "center " + (parseInt(scrollTopOffset) + parseInt(viewportHeight / 2) - parseInt(loadingImageHeight / 2)) + "px";
            }
        }
}

I hope it works for those who are experiencing the same problem.

Regards,
Manuel