Link to home
Start Free TrialLog in
Avatar of Nissiinfotech
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.........
         
<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
																			<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>

Open in new window

Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

If you can set the id of the element which was showing that item, you can find the

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/

Avatar of Nissiinfotech
Nissiinfotech

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.........
         
ASKER CERTIFIED SOLUTION
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.........
         
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
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.........
I got Solution