Jquery Applying plugins to "display:none" elements

Question

Hello,

i am running into the same problem again,

i have some display:none elements on my site and i cant´t apply jquery plugins on them. i am using the jScrollPane Plugin for example. http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

with:

$(function()
{
    $('.scroll-pane').jScrollPane();
});

you can activate it, but only on visible block elements. what i am doing now is aplying it right after the display:none element has been clicked to display:block

$(".hidden").click(
{
    $('.hidden').show().jScrollPane();
});

is there a trick to make those work right away, meaning making them not ignore display:none elements? thx

Answer 1

Instead of using display: none, You can set them to visibility: hidden and height: 0 instead and these plugins should work.

.element {
  visibility: hidden;
  height: 0;
}

Otherwise, you have to set display: inline|block|whatever before the plugin command is called.

Answer 2

Try making them visible just before using the jScrollPane plugin

$(".hidden").click(
{   
    $(this).css('display:block');
    $(this).jScrollPane();
});