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

Linking to anchor in radwin scrolls parent page

5 Answers 108 Views

Window

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

5 Answers, 1 is accepted

answered on 24 Apr 2012, 02:10 PM

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");

}

answered on 24 Apr 2012, 03:01 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

</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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

</head>

<body>

<a href="#test">anchor to click</a>

<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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

</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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

<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.

answered on 25 Apr 2012, 01:11 PM

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 :)

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Linking to anchor in radwin scrolls parent page

5 Answers, 1 is accepted