Nissiinfotech
asked on
How to set scroll position of a datalist inside a div tag using javascript?
Hai,
I had developed a web application in C#ASP.net 1.1.In my application there are several pages.
and my application has Ajax code using javascript.
In Page A,there is a datalist inside a div tag and div tag style is overflow.Datalist binds and show some element required.The Element binded in the datalist has sub-elements and has been added when the elements is clicked in the datalist.The sub-elements are get from Page B using Ajax code.
My Problem,I needed to set only one other item is showing above?That means,
If the datalist contains 36 items and each item has its sub-item.
For example, The 36 items are 1 to 36 item and I need to show,if user clicks 3rd item,I need to show 2nd on Top and 3rd get focused in the datalist .which item the user clcked the previous item is shown top and clicked item is focus
How to set the scroll psition of a datalist inside a div tag?
Plz send some sample code to solve this problem.........
I had developed a web application in C#ASP.net 1.1.In my application there are several pages.
and my application has Ajax code using javascript.
In Page A,there is a datalist inside a div tag and div tag style is overflow.Datalist binds and show some element required.The Element binded in the datalist has sub-elements and has been added when the elements is clicked in the datalist.The sub-elements are get from Page B using Ajax code.
My Problem,I needed to set only one other item is showing above?That means,
If the datalist contains 36 items and each item has its sub-item.
For example, The 36 items are 1 to 36 item and I need to show,if user clicks 3rd item,I need to show 2nd on Top and 3rd get focused in the datalist .which item the user clcked the previous item is shown top and clicked item is focus
How to set the scroll psition of a datalist inside a div tag?
Plz send some sample code to solve this problem.........
<div id="dlindex" style="OVERFLOW: auto; HEIGHT: 500px; TEXT-ALIGN: left"><asp:datalist id="DataList1" runat="server" CssClass="text" Width="208px" CellPadding="0">
<ItemTemplate>
<TABLE id="tab" width="100%" border="0" runat="server">
<TR>
<TD class="text" id="sd" vAlign="top" width="150" bgColor="#806686" runat="server">
<TABLE width="186">
<TR>
<TD><STRONG><A class="linksfaq" id="ahead" onclick="getdata(this);" href="#" runat="server"><%#DataBinder.Eval(Container.DataItem,"fld_heading")%></A></STRONG>
<input type=hidden id="id" runat=server value='<%# Container.ItemIndex+1 %>'>
<DIV id="divsubtitle" runat="server"></DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</ItemTemplate>
</asp:datalist></div>
ASKER
Hai,
Thanks for reply..
I need to scroll the position of the div which contains 36 items and that each item has sub-items.
when the user clicks the 3rd item it should scroll and show 2nd item on top and focus to 3rd item.This process should contain upto 20 items. It should shown like above process by the following steps:
1. In sequence,the above process
2.In random also.......
How to solve this problem?
Plz send some sample code to solve this problem.........
Thanks for reply..
I need to scroll the position of the div which contains 36 items and that each item has sub-items.
when the user clicks the 3rd item it should scroll and show 2nd item on top and focus to 3rd item.This process should contain upto 20 items. It should shown like above process by the following steps:
1. In sequence,the above process
2.In random also.......
How to solve this problem?
Plz send some sample code to solve this problem.........
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hai,
Thanks for reply..
The datalist inside a div tag.Inside the datalist there is another div tag which binds the sub-element from Page B using Ajax code.The div tag style is overflow.
I need to scroll the position of the div which contains 36 items and that each item has sub-items.
when the user clicks the 3rd item it should scroll and show 2nd item on top and focus to 3rd item.This process should contain upto 20 items. It should shown like above process by the following steps:
1. In sequence,the above process
2.In random also.......
How to solve this problem?
Plz send some sample code to solve this problem.........
Thanks for reply..
The datalist inside a div tag.Inside the datalist there is another div tag which binds the sub-element from Page B using Ajax code.The div tag style is overflow.
I need to scroll the position of the div which contains 36 items and that each item has sub-items.
when the user clicks the 3rd item it should scroll and show 2nd item on top and focus to 3rd item.This process should contain upto 20 items. It should shown like above process by the following steps:
1. In sequence,the above process
2.In random also.......
How to solve this problem?
Plz send some sample code to solve this problem.........
you may scroll to the specific jquery object on the page...
you can use jquery scrollTo plugin and use it as follows:
$.scrollTo("#dom_object_id ", 800);
which will scroll to the specified unique id jquery object on the page and do it with 800ms speed
you can use jquery scrollTo plugin and use it as follows:
$.scrollTo("#dom_object_id
which will scroll to the specified unique id jquery object on the page and do it with 800ms speed
ASKER
Hai,
Thanks for reply..
Jquery is not applicable for my application
How to solve this problem?
Plz send some sample code to solve this problem.........
Thanks for reply..
Jquery is not applicable for my application
How to solve this problem?
Plz send some sample code to solve this problem.........
ASKER
I got Solution
var oElement = document.getElementById(id
function getYPosition( oElement )
{
var iReturnValue = 0;
while( oElement != null ) {
iReturnValue += oElement.offsetTop;
oElement = oElement.offsetParent;
}
return iReturnValue;
}
then you can simple scroll to that position by
indow.scrollTo(xPosition, yPosition)
See these links for more info
http://bytes.com/topic/javascript/answers/90547-how-get-absolute-position-element
http://www.devguru.com/Technologies/ecmascript/quickref/win_scrollto.html
http://www.michaelapproved.com/articles/scroll-to-object-without-leaving-page/