Tested and working!
I discovered that there is a bug with jquery.jscrollpane.js
plugin due to the following reasons:
First reason:
When doing the following...
$(function(){
$('.pretty_sb').selectbox();
$('.sbOptions').jScrollPane();
});
First line (..).selectbox()
will customize the html select
and create the following in DOM
:
<ul id="sbOptions_82218379" class="sbOptions" style="display: none; (..)>
Then second line (..).jScrollPane()
will create the following children element inside ul
tag in the middle of script execution:
<div class="jspContainer" style="width: 155px; height: 454px;">
And also the following children element inside jspContainer
:
<div class="jspPane" style="padding: 5px 0px 0px; top: 0px; left: 0px; width: 155px;">(..)</div>
At this point jspPane
element contains the elements of the html select
at first sight.
To finally try to get the scrollHeight
(friendly known as height
) of jspPane
element in order to create the scrollbar. Seems that everything will work but NOT.
What's wrong?
Doing some debugging to the unminified
version of jquery.jscrollpane.js
plugin (obtained from the official site at: http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js)
You will see that on line 177
, the code is trying to get the scrollHeight
of the pane
by using simple javascript
like this:
contentHeight = pane[0].scrollHeight;
This will be used in future for creating the scrollbar
but when trying to get this CSS
property of a display: none
parent element this will result in 0
.
So, at line 182
the script will determine that the area is not scrollable (isScrollableV = false)
and the scrollbar will not appear due to this.
If you don't want to believe. Try getting the scrollHeight
by yourself (I made a short example, just comment
or uncomment
the display: none;
property of the child div
at CSS
side: http://jsfiddle.net/oscarj24/3Ycp7/).
Second reason:
This is really funny but check line 112
of jquery.jscrollpane.js
plugin, you will see the following comment:
// TODO: Deal with where width/ height is 0 as it probably means the element is hidden and we should
// come back to it later and check once it is unhidden...
It seems that the author is not handling when an element is hidden
or not, so it will return 0
for the height
or width
making the area not scrollable (as first reason description).
But, why this code snippet works?
$('.pretty_sb').selectbox({
onOpen: function (inst) {
$('.sbOptions').jScrollPane();
}
});
Because when opening the combobox
, the content is not hidden
anymore (onOpen
listener makes the trick, you can check the DOM
and look that display: none
from ul
tag is gone)
and that allows the jquery.jscrollpane.js
plugin to get what it wants and further add another CSS
class (jspScrollable
) to the ul
element that means that the area is scrollable
and everything will work fine with the new scrollbar.
Solution:
I really DON'T recommend this solution but maybe you can edit the unminified
version of jquery.jscrollpane.js
plugin just for yourself. But you will be responsible of author license infringement and others (just saying please don't be rude with me people). This way you will invoke just $(selector).jScrollPane();
and that's all.
Do what the author comment
said and evaluate if the element is hidden
or not but this will be really hard to accomplish for your case because ul
tag will be hidden
if the combobox
is "closed" and an event
listener will be needed (similar to your last approach to get this working).
I think the solution that fits your requirement is to continue using your last approach (the one using the onOpen
listener with some "corrections" like I will put it later/below). But I don't like it at all because you are repeating the (..).jScrollPane()
action again and again per click
done. Also, I think that there is no other way to solve this.
Live Demo: http://jsfiddle.net/oscarj24/8VX4d/33/
jQuery code:
/* Define a default global variable with some value for scrollable area height. */
var DEFAULT_SBHEIGHT = 150;
$(function(){
$('.cat_list').jScrollPane();
$('.pretty_sb').selectbox({
onOpen: function (inst) {
$('.sbOptions')
.height(DEFAULT_SBHEIGHT)
.jScrollPane();
}
});
});
Just to know, there are many possible cases of "script execution" but I just tried to analyze in deep this situation.
Hope this helps.