Databases
StackOverflow2013
Postsdbo
POHow to use .scrollTop() inside jQuery UI Dialog?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to use .scrollTop() inside jQuery UI Dialog?
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USKoU_warch
    1. USKoU_warch
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COtry $("#container").scrollTop($("#container")[0].scrollHeight);
      singulars
      1. POHow to use .scrollTop() inside jQuery UI Dialog?
      1. USDhiraj
    2. CO@DhirajBodicherla It does the same thing as .offset().top
      singulars
      1. POHow to use .scrollTop() inside jQuery UI Dialog?
      1. USKoU_warch
    3. COTry creating jsfiddle.net. The code you provided is not complete. Also depending on your requirements, you can use native jquery functions instead of "livequery"
      singulars
      1. POHow to use .scrollTop() inside jQuery UI Dialog?
      1. USr0m4n
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload