This is a migrated thread and some comments may be shown as answers.

Does Not Load the panel in whole page.

5 Answers 245 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

rajkamal Gupta asked on 30 Dec 2009, 09:26 AM

Hi All,
I am having problem in the AjaxLoading Panel. I want to display the loading panel in whole page rather then the specific control for that i used RadAjaxPanel l in the master page like this:

<telerik:RadAjaxPanel ID="Loadingpanel1"  runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">

           <ClientEvents  OnRequestStart="RequestStart()" />

            <AjaxSettings>

                <telerik:AjaxSetting AjaxControlID="Loadingpanel1">

                    <UpdatedControls>

                        <telerik:AjaxUpdatedControl ControlID="Loadingpanel1" LoadingPanelID="RadAjaxLoadingPanel1" />

                    </UpdatedControls>

                </telerik:AjaxSetting>

            </AjaxSettings>  

        </telerik:RadAjaxManager>

 <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"  Transparency="30"  IsSticky="true" CssClass="MyModalPanel" Skin="" ScrollBars="None">

                 <asp:Image ID="Image1"  runat="server" AlternateText="Wird geladen" Style="" ImageUrl=  "~/App_Themes/WillisDRITheme/Images/Processing.gif"  CssClass="MyLoadingImage"/>

        </telerik:RadAjaxLoadingPanel>   <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

                </asp:ContentPlaceHolder>

</telerik:RadAjaxPanel>

this will display the Loading panel in the whole page but the image is not display in the center of the page. Like when the page is scrollable i.e. page height is more then the screen height in that case the loading image should be always in the center.But Image appear to the center of the whole page height(screen height).

I use given script to use the loading panel in full page.

    
            function RequestStart() { 
        
                    // the following Javascript code takes care of expanding the RadAjaxLoadingPanel 
        
                    // to the full height of the page, if it is more than the browser window viewport 
        
                    var loadingPanel = document.getElementById("<%= RadAjaxLoadingPanel1.ClientID %>"); 
        
                    var pageHeight = document.documentElement.scrollHeight; 
        
                    var viewportHeight = document.documentElement.clientHeight; 
        
                    if (pageHeight > viewportHeight) { 
        
                        loadingPanel.style.height = pageHeight + "px"; 
        
                    } 
        
                    // the following Javascript code takes care of centering the RadAjaxLoadingPanel 
        
                    // background image, taking into consideration the scroll offset of the page content 
        
                    var scrollTopOffset = document.documentElement.scrollTop; 
        
                    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 
        
                    { 
        
                        var panels = document.getElementsByClassName("MyModalPanel"); 
        
                        for (var j = 0; j < panels.length; j++) { 
        
                            panels[j].style.backgroundPosition = "center " + (parseInt(scrollTopOffset) + parseInt(viewportHeight / 2) - parseInt(loadingImageHeight / 2)) + "px"; 
        
                        } 
        
                    } 
        
                }

and use this Style for the Loading Image.

    
            .MyLoadingImage 
        
            { 
        
                position:relative; 
        
                top:50%; 
        
                margin-top:-30px; 
        
                left:50%; 
        
                margin-left:-65px; 
        
            }

Thanks
Wish you new Year!!

5 Answers, 1 is accepted

answered on 31 Dec 2009, 06:20 AM

Hi,
Thanks for the response, But this has not solve my problem as my problem is that when page height is more then the browser height
then the image appear center of the page and when we scroll down then image should also move so that it always looks in the center of the visible area of the screen.
Current behavior is that it always remain in the center of the page height.

In the 2nd link project the first page(UsingBackground.aspx) set the image in the center of the browser screen but when the page height is greater then the browser window height and scroll down the image is not visible.
In the 2nd link project the second page(UsingPositioning.aspx) set the image in the center of the page height so if the the page height is greater then the browser window height then image is not visible but when you scoll down then you see the image.

My concern is that the loading image always appear in the center of the visible page in the browser.

Thanks
Wish You Happy New Year(2010)!!