Expanding a collapsible set should scroll you to the top of it's contents

[InvisibleBacon]

If you have more than a page's height worth of contents in your first collapsible container, and you scroll down to the second set to expand, the browser's scroll position does not change, leaving you in the middle of the second container's contents. I fixed this on our site by scrolling to the top of the clicked header if it is off the top of the page after an expansion. Here's the code I use:

$("div.ui-collapsible-set").live("expand", function(e) {
    var top = $(e.target).offset().top;
        if ($(window).scrollTop() > top)
            $(window).scrollTop(top);
});

[LockyBoy]

Really useful bit of code, thanks for that

[toddparker]

This seems like a good idea. Mind creating a pull request?

[ricksuggs]

Cover the case that there is a previously expanded collapsible whose collapsing will cause the position of the subsequently expanding collapsible to change before adjusting the scroll position:

var lastExpanded;
$('div.ui-collapsible-contain').live('expand', function() {
    var $expandable = $(this);
    // wait until the lastExpanded is collapsed
    var intervalId = setInterval(function() {
        if (lastExpanded && lastExpanded.has( ".ui-collapsible-heading-collapsed" )) {
            var expandableTop = $expandable.offset().top,
            $window = $(window),
            targetPos = expandableTop - $window.scrollTop() + $expandable.height();
            if (targetPos > $window.height() || expandableTop < $window.scrollTop()) {
                $.mobile.silentScroll(expandableTop);
            }
            clearInterval(intervalId);
            lastExpanded = $expandable;
        } else {
            lastExpanded = $expandable;
        }
    }, 200);
});

[CaDs]

You just made my day!
Thanks a lot for the code

[adrianpillinger]

The current version of jquery-mobile (1.0) needs a slightly different class in the initial selector.

        var lastExpanded;
        $('div.ui-collapsible').live('expand', function() {
            var $expandable = $(this);
            // wait until the lastExpanded is collapsed
            var intervalId = setInterval(function() {
                if (lastExpanded && lastExpanded.has( ".ui-collapsible-heading-collapsed" )) {
                    var expandableTop = $expandable.offset().top,
                    $window = $(window),
                    targetPos = expandableTop - $window.scrollTop() + $expandable.height();
                    if (targetPos > $window.height() || expandableTop < $window.scrollTop()) {
                        $.mobile.silentScroll(expandableTop);
                    }
                    clearInterval(intervalId);
                    lastExpanded = $expandable;
                } else {
                    lastExpanded = $expandable;
                }
            }, 200);
        });

Has this code been added to jQuery mobile, or do you want a pull request still ?

[toddparker]

We did a bit of work on this but ran into some issues on edge cases. If this is working well for you and works on our target browsers, I'd love to see a pull request, sure.

[adrianpillinger]

I've not done any extensive testing yet with this, but would be happy to test it and attempt to tweak to work with the browsers I have access to...

iOS 5
Android (not sure what version off hand)
Current latest version of
Safari on Mac OS X
Firefox on Mac OS X
Firefox on windows
Chrome on windows
Chrome on Mac OS X

I'll have a play and if I get something working with the browsers I have access to I'll issue a pull request for someone to complete testing on other browsers.

Cheers
Adrian

[toddparker]

@adrianpillinger - We can test this on our side too. Do you have a demo page or PR?

[adrianpillinger]

Sorry for the slow reply - busy at work and home...I am working on a pull request.

[adrianpillinger]

Pull request made.

[sblenkhorne]

That's perfect! Thanks so much for sharing this. So easy to use. Copy and pasted in my code it worked without a hitch. That rarely happens!
Thanks!