0

I have rows of data contained within a scrollable div, and a user can expand a row to show more information if they click on DIV 1 which is contained within each row. DIV 2 which contains more information is then displayed/toggled using jquery.

So my design looks like so:

|- - - - - - - 
|Row 1
|Row 2
|Row 3
|Row 4
|etc..
 - - - - - - - - -

the segregated lines around my rows is my scrollable div container.

When a user clicks Div 1 this then shows Div2 

|- - - - - - - - - - - -
| Row 1
|Div 2 (Now Showing)
|Row 2
|Row 3
|Row 4
 - - - - - - - - - - -

as you can see in this example my scrollable container is at the top so div 2 is in view in this instance when the user has clicked on div 1 within row 1. however if a user then clicks on DIV 1 contained within row 4, which would then show div 2 underneath row 4, without the user having to manually scroll down they can not see DIV 2 as it is displayed outside of the scrollable container.

The user would have to manually have to scroll down, which could be exhausting depending on which row they are clicking on.

So my question is, how do I get my DIV2 to always scroll into view to the user?

so in effect what we would have is:

|- - - - - - - - - - - -
| Row 1                    <--- User does not scroll the outer container
|Div 2 (Now Showing)            up or down.          
|Row 2                              |
|Row 3                       < - - -|
|Row 4  <---- User clicks on DIV 1 within Row 4 without scrolling. 
 - - - - - - - - - - -

Then...

|- - - - - - - - - - - -
|Row 4                  <--- Without the user needing to scroll the 
|Div 2  (Now Showing)        outer container.          
|Row 5    /\                          |
|Row 6    |                    < - - -|
|Row 7    |--- Div 2 automatically scrolls into view. 
     - - - - - - - - - - -

I'm brand new to jquery so would appreciate it if someone could show me where i'm going wrong, thanks in advance.

<script>

$(".details").click(function()
{
    $(this).parent().next('.request_details').toggle();

});

</script>

<script>
    $(".request_details").ready(function(){
    $("html, body").delay(2000).animate({
        scrollTop: $('#search_results').offset().top 
    }, 2000);
});
</script>
James Daley
  • 259
  • 2
  • 8
  • 20
  • 1
    can you recreate this at http://jsfiddle.net? it would help to see your question clearly – aahhaa Jan 23 '15 at 15:11
  • You don't seem to be attempting to scroll anything on click. That's what needs to happen, and you'll need to compare the bottom of the newly-expanded div with the bottom of your scrollable container and slide the div up to match. – isherwood Jan 23 '15 at 16:20
  • 1
    @Isherwood well any idea how I can do this please? – James Daley Jan 23 '15 at 16:22
  • Furthermore, your question is much more lengthy than it would need to be, which is why you aren't getting much attention with it. Simplify and demonstrate your code as suggested. Here's some relevant reading: http://stackoverflow.com/questions/4884839/how-do-i-get-a-element-to-scroll-into-view-using-jquery – isherwood Jan 23 '15 at 16:22

0 Answers0