• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3109
  • 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
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

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