0

My HTML content is being generated from jquery and its depends on ajax response. In HTML content I have #leftsection which has css "overflow-y:scroll;" Inside "#leftsection" I have boxes say "#devicebox_"+i which has css "overflow-y:hidden;"

I'm appending dynamic list to "#devicebox_"+i and if number of list content is > 6 I'm applying "#devicebox_"+i

my HTML content with left section and devicebox look something like this

<div id="leftsection">
   <div id="devicebox_1">
       <div id="listitem_1">LIST ITEM 1</div>
       <div id="listitem_2">LIST ITEM 2</div>
       <div id="listitem_3">LIST ITEM 3</div>
       <div id="listitem_4">LIST ITEM 4</div>
       <div id="listitem_5">LIST ITEM 5</div>
       <div id="listitem_6">LIST ITEM 6</div>
       <div id="listitem_7">LIST ITEM 7</div>
       <div id="listitem_8">LIST ITEM 8</div>
   </div>
</div>

Following is my jQuery to scroll down devicebox_1.

Remember there are multiple deviceboxes e.g devicebox_1,devicebox_2,devicebox_3 as a content is dynamic and so is listitem. after loading deviceboxes and their relative item list.

ajax request is being send one by one to process LIST ITEMS. what I'm trying to to is to scroll down current devicebox (devicebox_1) down to list item which is in process.

Following is small jQuery that I'm using to scroll down but not working

for( var i=0; i< $(itemlist).size(); i++)
{
   $('#devicebox_'+currDeviceid).animate({
          scrollTop: $('#listitem_'+i).offset().top
   }, 100);
}
Mahendra
  • 908
  • 1
  • 18
  • 38
  • What does your error console say ? – rm-vanda Dec 03 '14 at 14:55
  • no error it just move to next listitem and process it – Mahendra Dec 03 '14 at 14:56
  • Does the code do anything at all? I.e., does it scroll less or more than you want? If the list item is appended at the end of the list, you can simply use an arbitrarily big value for `scrollTop`, e.g. `0xffff`. – clapas Dec 03 '14 at 15:50

1 Answers1

1

1: The scroll top is relative to your #devicebox_X element, so if you want to scroll your devicebox to the position of the listitem the devicebox element has to have the CSS style position: relative.

2: To use the offset relative to it's offset parent you need to use jQuery's position() method which works exactly the same as the offset method but then relative to it's parent.

See jQuery's description of the position method

Then it should work.

Johan
  • 390
  • 4
  • 11