Linking to anchor in radwin scrolls parent page

6 posts, 0 answers
  1. Nik
    Nik avatar
    51 posts
    Member since:
    Sep 2009

    Posted 31 Aug 2010 Link to this post

    Can anyone tell me how to stop the behavior of the parent page scrolling down until the radwindow is at the top of the page when linking to an anchor tag within the radwindow content? I originally thought it was due to my href being "#", but I changed it to "javscript:void(0);" and the same thing happens.
  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 01 Sep 2010 Link to this post

    Hi Nik,

    I just answered your other forum post on the same subject:
    http://www.telerik.com/community/forums/aspnet-ajax/window/using-anchor-tags.aspx


    Best wishes,
    Georgi Tunev
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Yeroon
    Yeroon avatar
    87 posts
    Member since:
    Oct 2012

    Posted 24 Apr 2012 Link to this post

    Hello,

    This doesnt seem to solve this problem:

    Open a RadWindow from a page. When the radwindow content contains an anchor, as soon as you follow the anchor link in the radwindow content, the main page that opened the window will scroll down too, putting the top of my radwindow out of view.
    To prevent this I applied some jQuery to the radwindow content page:

    <script type="text/javascript">
        $(document).ready(function () {
            //get all anchors/links with the wildcar selector #
            var aAnchor = $('a[href*="#"]');
            //loop through them
            for (var i = 0; i < aAnchor.length; i++) {
                //skip any links that radwindow creates and contain a # at the end. E.g.: http://host/MyWindow.aspx?qs=1#
                //radwindow will add # at end of links somehow in contentpage
                if (!aAnchor[i].href.match(/#$/)) {
                    //attach click funtion
                    aAnchor[i].onclick = function () {
                        //select element with corresponding name starting at poss 1 of link value
                        //link will be e.g.: link.aspx?id=1#something
                        //this.hash is then #something, so start at 1 so we have just: something
                        //and then scroll it into view
                        $("[name='" + this.hash.substring(1) + "']")[0].scrollIntoView();
                        //now scroll the top page (main frame from which you opened radwindow back to pos 0,0
                        top.scrollTo(0, 0);
                        return false;
                    };
                }
     
            }
        });
         
    </script>


    and disabled scrollbars on parent page when opening a window (doing this is not enough to prevent the parent page scroll. Without the parentpage scrollbars it will still scroll. So you need to above jQuery code in windowpage too).

    Diasble when you perform radwindow open code:

    function openContentWindow(url, width, height) {
                    var oWnd = window.$find("<%=rwEditContent.ClientID%>");
                    oWnd.setUrl(url);
                    if (width && height)
                        oWnd.setSize(width, height);
                    else
                        oWnd.setSize(pageWidth() - 60, pageHeight() - 60);
                     
                    disable_scrollbars();
                    oWnd.center();
                    oWnd.show();
                }
                function disable_scrollbars() {
                    $("body").css("overflow", "hidden");
                }
              //attach this to OnClientClose event of radwindow to enable scrollbars again when radwindow closes
               function rw_ClientClose(sender, args) {
                    $("body").css("overflow", "auto");
                }

  5. Yeroon
    Yeroon avatar
    87 posts
    Member since:
    Oct 2012

    Posted 24 Apr 2012 Link to this post

    I decided to add a little sample project. See default.aspx to reproduce the problem. Use corrected.aspx to see fixed version.
    Sample was made with the 2012.1.411.35 version of Telerik. It is not included in the solution.

    As I can't add project to a post here is a link: http://hezeltime.hezelbizz.nl/WindowAnchor.rar
    And if you dont trust it here is all the code (there is no code-behind included as its not needed to reproduce):

    Default.aspx (parent page that shows the problem):

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
        <telerik:RadScriptBlock runat="server" ID="rsb">
        <script type="text/javascript">
             
            function openItemWindow() {
                var url = "Test.html";
                var oWnd = window.$find("<%=rwEditContent.ClientID%>");
                oWnd.setUrl(url);
     
                oWnd.setSize(300, 300);
                 
                 
                oWnd.center();
                oWnd.show();
                 
            }
        </script>
        </telerik:RadScriptBlock>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
        //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <div>
        <a onclick="openItemWindow();" style="text-decoration: underline; cursor: pointer;">click to open window. click the link in window and see this page scroll too</a>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        </div>
        <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Metro" Modal="True">
                <Windows>
                    <telerik:RadWindow ID="rwEditContent" runat="server" VisibleTitlebar="true" VisibleStatusbar="false"
                        ReloadOnShow="false" ShowContentDuringLoad="false" Skin="Metro" Behaviors="Close, Resize, Reload"
                        Modal="false" AutoSize="false"><Localization Close="Sluiten (Esc)" Reload="Vernieuwen (R)"></Localization>
                        <Shortcuts> <telerik:WindowShortcut CommandName="Reload" Shortcut="R" /><telerik:WindowShortcut CommandName="Close" Shortcut="Esc" /></Shortcuts>
                    </telerik:RadWindow>
                    
                </Windows>
            </telerik:RadWindowManager>
        </form>
    </body>
    </html>

    This page opens Test.html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head>
        <title></title>
    </head>
    <body>
        <a href="#test">anchor to click</a>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <a name="test">scroll to here</a>
    </body>
    </html>

    Corrected.aspx (is same layout, but with fixed scroll problem):

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Corrected.aspx.cs" Inherits="Corrected" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
        <telerik:RadScriptBlock runat="server" ID="rsb">
        <script type="text/javascript">
             
            function openItemWindow() {
                var url = "Test.aspx";
                var oWnd = window.$find("<%=rwEditContent.ClientID%>");
                oWnd.setUrl(url);
     
                oWnd.setSize(300, 300);
     
                disable_scrollbars();
                oWnd.center();
                oWnd.show();
     
            }
            function rw_ClientClose(sender, args) {
                $("body").css("overflow", "auto");
            }
     
            function disable_scrollbars() {
                $("body").css("overflow", "hidden");
            }
        </script>
        </telerik:RadScriptBlock>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
        //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <div>
        <a onclick="openItemWindow();" style="text-decoration: underline;">click to open window. click the link in window and see this page wont scroll anymore</a>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        </div>
        <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Metro" Modal="True">
                <Windows>
                    <telerik:RadWindow ID="rwEditContent" OnClientClose="rw_ClientClose" runat="server" VisibleTitlebar="true" VisibleStatusbar="false"
                        ReloadOnShow="false" ShowContentDuringLoad="false" Skin="Metro" Behaviors="Close, Resize, Reload"
                        Modal="false" AutoSize="false"><Localization Close="Sluiten (Esc)" Reload="Vernieuwen (R)"></Localization>
                        <Shortcuts> <telerik:WindowShortcut CommandName="Reload" Shortcut="R" /><telerik:WindowShortcut CommandName="Close" Shortcut="Esc" /></Shortcuts>
                    </telerik:RadWindow>
                    
                </Windows>
            </telerik:RadWindowManager>
        </form>
    </body>
    </html>


    Opens Test.aspx with the added jquery:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Corrected" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
         
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
        //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <div>
        <a href="#test">anchor to click</a>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <a name="test">scroll to here</a>
        </div>
        
        </form>
    </body>
    <script type="text/javascript">
        $(document).ready(function () {
            //get all anchors/links with the wildcar selector #
            var aAnchor = $('a[href*="#"]');
            //loop through them
            for (var i = 0; i < aAnchor.length; i++) {
                //skip any links that radwindow creates and contain a # at the end. E.g.: http://host/MyWindow.aspx?qs=1#
                //radwindow will add # at nd of links somehow in contentpage
                if (!aAnchor[i].href.match(/#$/)) {
                    //attach click funtion
                    aAnchor[i].onclick = function () {
                        //select element with corresponding name starting at poss 1 of link value
                        //link will be e.g.: link.aspx?id=1#something
                        //this.hash is then #something, so start at 1 so we have just: something
                        //and then scroll it into view
                        $("[name='" + this.hash.substring(1) + "']")[0].scrollIntoView();
                        //now scroll the top page (main frame from which you opened radwindow back to pos 0,0
                        top.scrollTo(0, 0);
                        return false;
                    };
                }
     
            }
        });
         
    </script>
    </html>


    Hope it helps somebody else.
  6. rdmptn
    rdmptn avatar
    72 posts
    Member since:
    Aug 2011

    Posted 25 Apr 2012 Link to this post

    Yeroon,

    I actually see that you still have anchor elements in your page that use hashes to control the page, which will then leave the browser behavior to what is explained in this post.

    It's even easier if you adopt the javascript:void(0); approach:

    <a href="javascript:void(0);" onclick="setScroll();return false;">anchor to click</a>
    <a id="theTestAnchor" name="test">scroll to here</a>
    and
    function setScroll()
    {
        var scroll = document.getElementById("theTestAnchor").offsetTop;
        window.scrollTo(0, scroll);
    }

    all in the content page.

    Using some jQuery for this can ease cross-browser compatibility, too.

    You can also keep your current scripts if you see fit :)

  7. Yeroon
    Yeroon avatar
    87 posts
    Member since:
    Oct 2012

    Posted 25 Apr 2012 Link to this post

    Your solution definately is a better one when you can control the content of the page in the RadWindow. Unfortunately I can't in my scenario. So I am stuck with adding the scripts as I posted. That way the links that point to the anchors don't need to be modified, but will be 'hi-jacked' by the jQuery code.
    Thanks for your reply. Will definately use your solution in future scenario's where I can control the links too.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017