Question

jScrollPane has a very reasonable problem when working with tabs. Tabs (both jQuery UI and jQuery Tools) usually use display: none to hide unfocused tabs. This messes jScrollPane up. The fix is instead of display: none; to write something like position: absolute; left: -10000px;.

Unfortunately in jQuery Tools I don’t see any idea how to do this myself. There’s no CSS class jQuery Tools use for hidden tabs that I can override.

Any ideas on how to hack this together?

Answer 1

It looks like you can override the default effect. Check out the bottom of this page in the docs of jQuery Tools. Instead of the default hide() which sets display:none; you could set the css yourself.

$.tools.tabs.addEffect("default", function(tabIndex, done) {

    // hide all panes and show the one that is clicked
    //this.getPanes().hide().eq(tabIndex).show();

        this.getPanes().css({position: 'absolute', left: '-10000px'}).eq(tabIndex).css({{position: 'relative', left: '0'}});

        // the supplied callback must be called after the effect has finished its job
    done.call();
});