Using jQuery 1.3.2 to center a RadAjaxLoadingPanel

Thread is closed for posting
2 posts, 1 answers
  1. Answer
    BB3B52F8-A553-43A5-8767-104C88ACC4FD
    BB3B52F8-A553-43A5-8767-104C88ACC4FD avatar
    35 posts
    Member since:
    Mar 2008

    Posted 10 Nov 2009 Link to this post

    Requirements
    RadControls version

    2009 Q1
    .NET version

    3.5
    Visual Studio version

    2008 SP1
    programming language

    Javascript, jQuery
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    This is a short example of how to use jQuery to center a loading panel on the screen. Hope this is helpful!

    1. Add the jQuery 1.3.2 scripts to the ASP.NET page.
    <script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script> 
     

    2. Create a jQuery extension to center an element.
    jQuery.fn.center = function() {  
        this.css("position", "absolute");  
     
        this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");  
        this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");  
    } 

    3. Make use of the OnRequestStart client side event handler for the RadAjaxManager or RadAjaxPanel controls.
    <telerik:RadAjaxManager ID="PageAjaxManager" runat="server">  
        <ClientEvents OnRequestStart="AjaxRequestStart" /> 
        <AjaxSettings> 
            <telerik:AjaxSetting AjaxControlID="MainToolBar">  
                <UpdatedControls> 
                    <telerik:AjaxUpdatedControl ControlID="MainToolBar" /> 
                    <telerik:AjaxUpdatedControl ControlID="CurrentCostCentersGrid" LoadingPanelID="loadingLarge" /> 
                </UpdatedControls> 
        </telerik:AjaxSetting> 
        </AjaxSettings> 
    </telerik:RadAjaxManager> 
    <telerik:RadAjaxLoadingPanel ID="loadingLarge" runat="server" IsSticky="true">  
        <img src="Images/loading.gif" alt="Loading..." /> 
    </telerik:RadAjaxLoadingPanel> 
     

    4. Get a refrence to the client side ID and pass it into the center function
    function AjaxRequestStart(sender, eventArgs) {  
        var loadingPanel = "#<%= loadingLarge.ClientID %>";  
        $(loadingPanel).center();  
    } 
  3. 35FC6F20-EEB5-48C4-B91B-06C770662FC5
    35FC6F20-EEB5-48C4-B91B-06C770662FC5 avatar
    3388 posts
    Member since:
    Apr 2016

    Posted 13 Nov 2009 Link to this post

    Hello Chris,

    Thank you for sharing your experience with the community. I hope the other members will find you sample useful.
    Additionally, I have updated your Telerik points.

    Best wishes,
    Iana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.