• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2935
  • Last Modified:

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

0
Nissiinfotech
Asked:
Nissiinfotech
  • 4
  • 2
1 Solution
 
Gurvinder Pal SinghCommented:
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/

0
 
NissiinfotechAuthor Commented:
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.........
         
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
NissiinfotechAuthor Commented:
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.........
         
0
 
HaloWebProjectsCommented:
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
0
 
NissiinfotechAuthor Commented:
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.........
0
 
NissiinfotechAuthor Commented:
I got Solution
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now