Is there a may to make the panel scrollbars scroll up or down on postback?
If not is there some control in asp.net that I can put a bulleted list in and scoll it programatically.By "panel", I assume you refer to the <asp: Panel> tag? A quick note - it renders as a <table> element within Firefox; this code won't work with it.
ASPX:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<style>
.ScrollContainer {
height: 150px;
border: 1px solid black;
overflow: scroll;
}
#txtScrollTo {
width: 50px;
}
</style>
<script language="javascript" type="text/javascript">
function ScrollPanelToElement(elementId) {
var element = document.getElementById('Point' + elementId);
if (element) {
var elementX = element.offsetTop;
var parent = element.parent;
while (parent != null) {
elementX += parent.offsetTop
parent = parent.parent;
}
document.getElementById('<%= pnlContainer.ClientID %>').scrollTop = elementX;
}
}
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<div id="div1">
Div 1<br>Div 1<br>Div 1<br>Div 1<br>
<div id="div2">
Div 2<br>Div 2<br>Div 2<br>Div 2<br>
<div id="div3">
Div 3<br>Div 3<br>Div 3<br>Div 3<br>
<asp:Panel id="pnlContainer" runat="Server" CssClass="ScrollContainer">
<a id="Point1" name="Point1"></a><asp:Label Text="Point 1" runat="Server" /><br /><br /><br />
<a id="Point2" name="Point2"></a><asp:Label Text="Point 2" runat="Server" /><br /><br /><br />
<a id="Point3" name="Point3"></a><asp:Label Text="Point 3" runat="Server" /><br /><br /><br />
<a id="Point4" name="Point4"></a><asp:Label Text="Point 4" runat="Server" /><br /><br /><br />
<a id="Point5" name="Point5"></a><asp:Label Text="Point 5" runat="Server" /><br /><br /><br />
<a id="Point6" name="Point6"></a><asp:Label Text="Point 6" runat="Server" /><br /><br /><br />
<a id="Point7" name="Point7"></a><asp:Label Text="Point 7" runat="Server" /><br /><br /><br />
<a id="Point8" name="Point8"></a><asp:Label Text="Point 8" runat="Server" /><br /><br /><br />
<a id="Point9" name="Point9"></a><asp:Label Text="Point 9" runat="Server" /><br /><br /><br />
<a id="Point10" name="Point10"></a><asp:Label Text="Point 10" runat="Server" /><br /><br /><br />
<a id="Point11" name="Point11"></a><asp:Label Text="Point 11" runat="Server" /><br /><br /><br />
<a id="Point12" name="Point12"></a><asp:Label Text="Point 12" runat="Server" /><br /><br /><br />
<a id="Point13" name="Point13"></a><asp:Label Text="Point 13" runat="Server" /><br /><br /><br />
</asp:Panel>
</div>
</div>
</div>
Scroll to point: <asp:TextBox id="txtScrollTo" runat="Server" MaxLength="2" />
<asp:Button ID="btnSubmit" Runat="server" Text="Submit"></asp:Button>
<br><br><a href="http://links.10026.com/?link=javascript:window.location=window.location">Refresh w/o postback</a>
</form>
</body>
</HTML>
Code behind:
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace MyNamespace
{
public class WebForm1 : Page
{
protected Button btnSubmit;
protected TextBox txtScrollTo;
private void Page_Load(object sender,
EventArgs e)
{
}
private void btnSubmit_Click(object sender,
EventArgs e)
{
this.Page.RegisterStartupScript("ScrollTo",
string.Format(
"<script language=\"javascript\">ScrollPanelToElement('{0}')</script>",
txtScrollTo.Text));
}
#region Web Form Designer generated code
protected override void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
this.btnSubmit.Click += new EventHandler(btnSubmit_Click);
}
#endregion
}
}
Thanks for the help. The Javascript works. I am having a problem getting the code behind to work. I am using vb and I tried to convert it but I can not get it to work. I am wondering if it is working but the postback is reseting the scrollbar. If any body has any more info on this subject can you post up some code.
Thanks
Set smartNavigation="true" in the @.Page directive.
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment