1

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 1300x768 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.

4
  • try $("#container").scrollTop($("#container")[0].scrollHeight);
    – Dhiraj
    Jun 12, 2012 at 16:32
  • @DhirajBodicherla It does the same thing as .offset().top
    – KoU_warch
    Jun 12, 2012 at 16:51
  • Try creating jsfiddle.net. The code you provided is not complete. Also depending on your requirements, you can use native jquery functions instead of "livequery"
    – r0m4n
    Jun 12, 2012 at 20:22
  • @r0m4n done as suggested. Thank you.
    – KoU_warch
    Jun 12, 2012 at 23:17

2 Answers 2

1

Not Really an Answer but couldn't see passed the blur of code to find the comment link.

Anyway...I too am struggling to use .scrollTop() inside jQuery UI Dialog. I too have posted a Fiddle in the hope of demonstrating my failure to understand the code necessary to make it work. There, you will see a working dialog, and a SHORT bit of code clearly demonstrating my failed attempt.

I don't think screen resolution has anything to do with your trouble on jsFiddle. Rather, I suspect your code is so far removed from its intended context as to be generally incomplete -- where not utterly broken -- but not sufficiently removed from its intended context as to render the trouble spot visible to willing eyes. Waayyy too much code to sort pass to make a reasonable effort to help you suss out the problem.

I suggest you try mocking it up on your development platform stripped of EVERYTHING but the relevant bits (e.g. a dialog and a cause and means to call scrollTop() ). Then, when you still can't get it to work, post the stripped down code either here, or on jsFiddle and ask for help then. (Just my two cents.)

1
  • i found a solution for your problem, however that solution does not fix my problem.
    – KoU_warch
    Jun 26, 2012 at 17:51
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.