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

Centering LoadingPanel Image on Screen but Inside Container

3 Answers 107 Views

Ajax

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

Corey asked on 13 Mar 2009, 03:07 PM

Rather than centering the image on the entire page, I use the following setup to ensure that the loading image is visible on the page if the container being updated is visible. Depending on the position of the area being updated, the image will try to move as close to the vertical center of the page as possible so that the loading image is nearly always visible. This works with '09 Q1 using skins as well as older versions which have custom content. Depending on the content of your LoadingPanel, you may need to adjust the amount of padding added.

The .aspx file:

    
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"  DefaultLoadingPanelID="RadAjaxLoadingPanel1"> 
        
                <ClientEvents OnRequestStart="ajaxRequestStart();"/> 
        
                 ... 
        
            </telerik:RadAjaxManager> 
        
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" BackgroundPosition="Top" Skin="WebBlue"/> 
        
            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> 
        
                <script type="text/javascript"> 
        
                    function ajaxRequestStart() 
        
                    { 
        
                        centerUpdatePanel($get('<%= RadAjaxLoadingPanel1.ClientID %>')); 
        
                    } 
        
                </script> 
        
            </telerik:RadScriptBlock>

The .js file:

    
            function centerElementWithPadding(element)  
        
            {  
        
                try  
        
                {  
        
                    var scrollTop = document.body.scrollTop;  
        
                    var viewPortHeight = document.body.clientHeight;  
        
                    if (document.compatMode == "CSS1Compat")  
        
                    {  
        
                        viewPortHeight = document.documentElement.clientHeight;  
        
                        scrollTop = document.documentElement.scrollTop;  
        
                    }  
        
                    var topOffset = Math.ceil(viewPortHeight / 2 - element.offsetHeight / 2);  
        
                    var top = scrollTop + topOffset - 40 - 100;  // Adjust the padding here if necessary 
        
                    element.style.paddingTop = top + "px";  
        
                }  
        
                catch (err)  
        
                {  
        
                }  
        
            }

Note that this is nearly identical to the centering method provided by Telerik in the help file except that this uses padding and relative positioning. I find this more useful in settings where there are multiple controls that will be updated but the whole page doesn't need to be covered by a blanket LoadingPanel. Hope this was helpful!

3 Answers, 1 is accepted

answered on 13 Mar 2009, 04:22 PM

The idea isn't that the loading panel is always visible, it's that the loading panel is in the most visible possible location while still being contained within the bounds of the element that is being updated. If there is only one element on the page, then it makes more sense to "grey-out" the entire screen while the partial page post-backs do their thing. If you have several controls on the page that are updated independently, I feel it makes more sense to the user to only have those controls that are being updated "greyed-out." The aim of this script is to aid that second senario by placing the update animation as close to vertical center of the view frame as possible. This way, the animation is highly visible while not taking over the whole screen.