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.
5 Answers, 1 is accepted
0
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
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
0
Yeroon
Top achievements
Rank 2
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:
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:
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"
);
}
0
Yeroon
Top achievements
Rank 2
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):
This page opens Test.html:
Corrected.aspx (is same layout, but with fixed scroll problem):
Opens Test.aspx with the added jquery:
Hope it helps somebody else.
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
>
<
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">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
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">
<
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
>
<
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">
<
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
>
<
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.
0
rdmptn
Top achievements
Rank 1
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
>
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 :)
0
Yeroon
Top achievements
Rank 2
answered on 25 Apr 2012, 01:19 PM
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.
Thanks for your reply. Will definately use your solution in future scenario's where I can control the links too.