Question

I’ve got a scrollable div with rows (and hidden rows). Clicking on one of the rows causes the next hidden sibling to show.

In Firefox, however, clicking on a row causes the scrollable div to jump back up to the top, and only the first time. Scroll back down and click a row, and the scrollbar stays where it is.

IE and Chrome do not reset the scrollbar, which is extra frustrating.

http://jsfiddle.net/xyan/TH4X3/

HTML:

The HTML is lengthy for the purposes of having enough information to have a scrollbar. Because of its length, I won’t post it here.

Javascript:

var trackingresults = {
    pos: [],
    container: {},
    data: {}
}
trackingresults.container = $('#test-tracking');
trackingresults.container.delegate('tr:not(.history)', 'click', function() {
    if ($(this).next('tr').is(':visible')) {
        $(this).find('td.details').removeClass('collapse').addClass('expand');
        $(this).removeClass('current');
        $(this).next('tr').hide();
    } else {
        $(this).find('td.details').removeClass('expand').addClass('collapse');
        $(this).addClass('current');
        $(this).next('tr').show();
    }
    return false;
});
trackingresults.container.delegate('tr:not(.history)', 'hover', function() {
    if ($(this).find('td.details').hasClass('hover')) {
        $(this).find('td').removeClass('hover');
    } else {
        $(this).find('td').addClass('hover');
    }
    return false;
});

One of the “Similar Questions” links suggested this problem. This seems similar, but might be different enough to warrant this question.

Is there something I can do to prevent the jumping?

Answer 1

I refactored your code a bit and the problem went away: http://jsfiddle.net/TH4X3/6/

You don’t need the .hover() handler or the .hover class, just do it in css via :hover. Replace this selector: #test-shipments td.hover with this:

#test-shipments tr.current, #test-shipments tr:hover td {
    background-color: #B1C3C4;
}

You don’t need a .collapsed class – just make that the default and let .expanded override the defaults.

Rather than showing and hiding the next row explicitly, just use css to do it, based on the previous siblings .expanded class. Use the adjacent sibling selector – +:

#test-shipments tr.expand + tr.history {
    display: table-row;
}

With just those css tweaks* you can reduce your JavaScript to just this:

var trackingresults = {
    pos: [],
    container: {},
    data: {}
}
trackingresults.container = $('#test-tracking');
trackingresults.container.delegate('tr:not(.history)', 'click', function() {
    $(this).toggleClass("expand");
});

And as a side-effect, your firefox scrolling issue goes away!

* ^{Plus a couple of IE7 hacks, see the jsFiddle}