title: How to use .scrollTop() inside jQuery UI Dialog?
body: <p><strong>Link to <a href="http://jsfiddle.net/TGsM5/17/" rel="nofollow">problem</a></strong>: </p>
  
  <p>Using <code>.scrollTop()</code> method inside a jQuery Dialog is not working for me, the HTML markup is this: </p>
  
  <pre><code>&lt;div id="toogleMAmaximized" style="background:#000000"&gt;
       &lt;div id="missionsMinimized" style="display:none;margin-top:10px;margin-bottom: 10px;cursor:pointer"&gt;&lt;img src="images/missionsMinimized.png" alt="missions"/&gt;&lt;/div&gt;
       &lt;div id="achivmentsMinimized" style="display:none;margin-top:5px;cursor:pointer"&gt;        &lt;img src="images/achivmentsMinimized.png" /&gt;&lt;/div&gt;
       &lt;div id="missions" class="unselected MAmaximized"&gt;&lt;/div&gt;
       &lt;div id="achivments" class="unselected MAmaximized"&gt;&lt;/div&gt;
       &lt;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"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I use a JavaScript function to populate the <code>dataMA</code> div.</p>
  
  <pre><code>        function populateMissionsData(){    
               $('#missions').empty();
               $('#dataMA').append('&lt;h1 style="color:white"&gt;Current Missions:&lt;/h1&gt;');
               for (var $key in missionData['current']){
                   $('#dataMA').append(missionData['current'][$key]);
               }
               $('#dataMA').append('&lt;h1 style="color:white"&gt;Not started missions:&lt;/h1&gt;');
               for (var $key in missionData['other']){
                   $('#dataMA').append(missionData['other'][$key]);
               }
               $('#dataMA').append('&lt;h1 style="color:white"&gt;Ccompleted Missions:&lt;/h1&gt;');
               for (var $key in missionData['completed']){
                   $('#dataMA').append(missionData['completed'][$key]);
               }
          }
  </code></pre>
  
  <p>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 <code>livequery</code> plugin, and here is the scroll problem:</p>
  
  <pre><code>        $(".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');
                }
            }));
  </code></pre>
  
  <p>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.</p>
  
  <p>I have changed the <code>dataMA</code> selector with <code>toogleMAmaximized</code> , it scrolled but not as expected (it moved up the content inside of it)</p>
  
  <p><strong>Update 1</strong>
  In case you are interested, my environment: 
  <code>jQuery</code> v1.7.1
  <code>jQuery UI</code> 1.8.16
  <code>liveQuery</code> 1.1.1</p>
  
  <p><strong>Update 2</strong> 
  I updated my environment to most recent versions of <code>jQuery</code> (1.7.2) and <code>jQuery UI</code> (1.8.21), keep having the same problem.</p>
  
  <p><strong>Update 3</strong>
  Ok, i got a <code>fiddle</code> 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 <code>plus</code> class). The dataMA variable is a replacement of my query to the database which returns in result the string i putted there. I use <code>livequery</code> as had many problems using <code>.on()</code> on tags added using a <code>.post()</code> request.</p>
  
  <p><a href="http://jsfiddle.net/TGsM5/17/" rel="nofollow">jsfiddle</a></p>
  
  <p><strong>Update 4</strong> 
  Can anyone with a higher resolution than 1300x768 tell me if they get the jsfiddle file correctly? I havent been able to solve this issue.</p>
  
  <p><strong>Update 5</strong></p>
  
  <p>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.</p>
  
  <p><strong>Update 6</strong></p>
  
  <p>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.</p>