can't use jquery plugin on :hidden div?

Question

I have some jquery tabs. There is a plugin I'm using for a scrolling pane of options inside tabs. It is not working when you click to a tab that was originally hidden on page load. I've tried initializing the plugin using the :hidden selector, but with no luck.

Below is the code...

            $('.scroll-pane').jScrollPane({
                showArrows   : true,
                hideFocus    : true
            });
            $('.scroll-pane:hidden').jScrollPane({
                showArrows   : true,
                hideFocus    : true
            });

Any ideas why it won't work on hidden divs?

Answer 1

That plugin can't initialize elements that are hidden - I believe it has something to do with you can't calculate the height of a hidden element simply. A simple solution would be to initialize the element when you show it, so for example:

tab_element.show().jScrollPane();

Another option would be to use the autoReinitialise option and set it to true. This basically sets up a timer that will automatically reinitialize the object over a set interval of time. But this is a bit of a waste, so I would suggest the first option.

Link to the docs on this very problem. http://jscrollpane.kelvinluck.com/invisibles.html

Answer 2

What makes the tabs visible? Some sort of click or other event? Try setting up the scroll panel in the same event that shows the tab. It sounds like the plugin is choosing not to operate on hidden divs. I can't think of another reason why simply being hidden would prevent some code from altering a div.

Use your same code as above, but also run it in the event that makes the tabs visible.