SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Fiddle me this! ;) jQuery accordion, scroll beginning of clicked tab to the top

    Got a little bit of a problem with getting my jquery accordion to do what I want.

    I always want the tab that is being clicked to be scrolled to a fixed amount of pixels from the top of the page, and I kinda got it working. But whenever the active tab is above the tab being clicked and if the page already is scrolled down a bit, the top and parts of the content of the clicked tab is scrolled up past the top of the page.

    This is what i got:
    Code:
    $(function() {
        $("#accordion").accordion({
            autoHeight: false,
            collapsible: true,
            heightStyle: "content",
            active: 0,
            animate: 300
        });
        $('#accordion h3').bind('click',function(){
            theOffset = $(this).offset();
            $('body,html').animate({ 
                scrollTop: theOffset.top - 100 
            });
        });
    });
    Here's a fiddle to illustrate my problem,

    For example, have "section 2" expanded, scroll down and click "section 3" tab and it all scrolls off the page, other way around it works though.

    And if closing the active tab before opening a new one it also works fine so I'm assuming this has something to to with the height of the collapsing tab that messes up the scroll to top function!?

    Hope someone can help, I probably approach this the wrong way. I kinda really don't know what I'm actually doing as my jquery skills are limited to a basic cut n' paste understanding! ^^

    Thanks in advance and all help and pointers area more then welcome!

    Cheers

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Solved!

    Code:
    $(function() {
            $("#accordion").accordion({
                autoHeight: false,
                collapsible: true,
                heightStyle: "content",
                active: 0,
                animate: 300 // collapse will take 300ms
            });
            $('#accordion h3').bind('click',function(){
                var self = this;
                setTimeout(function() {
                    theOffset = $(self).offset();
                    $('body,html').animate({ scrollTop: theOffset.top - 100 });
                }, 310); // ensure the collapse animation is done
            });
    });
    ...updated fiddle

    Maybe there is a better way to do this!?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •