Question

Link to problem:

Using .scrollTop() method inside a jQuery Dialog is not working for me, the HTML markup is this:

<div id="toogleMAmaximized" style="background:#000000">
     <div id="missionsMinimized" style="display:none;margin-top:10px;margin-bottom: 10px;cursor:pointer"><img src="images/missionsMinimized.png" alt="missions"/></div>
     <div id="achivmentsMinimized" style="display:none;margin-top:5px;cursor:pointer">        <img src="images/achivmentsMinimized.png" /></div>
     <div id="missions" class="unselected MAmaximized"></div>
     <div id="achivments" class="unselected MAmaximized"></div>
     <div id="dataMA" style="position:absolute;top:10px;right:10px;display:none;width:850px;height:500px;background-image: url('images/background-home.png') ; overflow-y:scroll"></div>
</div>

I use a JavaScript function to populate the dataMA div.

        function populateMissionsData(){    
             $('#missions').empty();
             $('#dataMA').append('<h1 style="color:white">Current Missions:</h1>');
             for (var $key in missionData['current']){
                 $('#dataMA').append(missionData['current'][$key]);
             }
             $('#dataMA').append('<h1 style="color:white">Not started missions:</h1>');
             for (var $key in missionData['other']){
                 $('#dataMA').append(missionData['other'][$key]);
             }
             $('#dataMA').append('<h1 style="color:white">Ccompleted Missions:</h1>');
             for (var $key in missionData['completed']){
                 $('#dataMA').append(missionData['completed'][$key]);
             }
        }

This works great as i get my dataMA populated without issue. Now i have a button that expands the content of divs inside dataMA that uses livequery plugin, and here is the scroll problem:

        $(".plus").livequery('click',(function(){
              key = $(this).attr('key').toString();           
              $('#data'+ key).slideToggle('fast');

              //this is the problem, it does not scroll the dialog.
              $('#dataMA').scrollTop($('#data'+ key).offset().top);
              //Update - this does not work either
              $('#dataMA').scrollTop($('#dataMA')[0].scrollHeight);                        
              //Update 100 - This is not working either
              $('#dataMA').scrollTop($('#data'+ key).offset().top - $('#dataMA').offset().top + $('#dataMA').scrollTop());
              $(this).toggleClass('less')
              if($(this).hasClass('less')){
                   $(this).attr('src','images/less.png');
              }else{
                   $(this).attr('src','images/plus.png');
              }
          }));

When i trigger the plus button it doesn’t do the scroll, however when i click on the plus button again it acts as it was scrolled down and scroll up.

I have changed the dataMA selector with toogleMAmaximized , it scrolled but not as expected (it moved up the content inside of it)

Update 1
In case you are interested, my environment:
jQuery v1.7.1
jQuery UI 1.8.16
liveQuery 1.1.1

Update 2
I updated my environment to most recent versions of jQuery (1.7.2) and jQuery UI (1.8.21), keep having the same problem.

Update 3
Ok, i got a fiddle file for you guys to see the problem. I can’t get it right on my small screen hope you guys get it better. The first thing is to click on the image to the right, and then click on the first square. To see the scrolling problem click on any of the non loading icons on the titles (they have the plus class). The dataMA variable is a replacement of my query to the database which returns in result the string i putted there. I use livequery as had many problems using .on() on tags added using a .post() request.

jsfiddle

Update 4
Can anyone with a higher resolution than 1300×768 tell me if they get the jsfiddle file correctly? I havent been able to solve this issue.

Update 5

I’m able to scroll several elements but when the element it’s outside the conteined div it is not scrolled to, however as mention above when i hit the button again it try to scroll up.

Update 6

I updated the jsfiddle for better understanding, the procedure is the same: click on the image -> dialog pops up -> click on missions -> scroll down to the last one (a thick wall) -> click on the missing image to the right (i dont know why it does not display the alt content) doing that will display a hidding content, clicking on it again will hide it. However the automatic scroll is not done.

Answer 1

I finally understood where my problem was. I was trying to do the scroll before the slideToggle() effect was finished! all i need to do was to call the scrolling like this:

$('#data'+ key).slideToggle('fast',function(){
    $('#dataMA').scrollTop($('#data'+ key).offset().top - $('#dataMA').offset().top + $('#dataMA').scrollTop());
});

Here is the solution