Custom horizontal and vertical scrollbars at a time with jQuery
2010
A client of mine wanted to use custom scrollbars for a website. I quickly found Kelvin Luck’s jQuery plugin for modifying the browser’s scrollbar. So, jScrollPane works great for vertical scrollbars and integrates neatly with WordPress, when calling it like this from the <head> section of your WordPress site:
var $j = jQuery.noConflict();
$j(function(){
jQuery('.scroll-pane').jScrollPane({scrollbarWidth:10});
});
However, the client also wanted the horizontal scrollbars customized…
It took me several hours to stumble upon the modification of Luck’s plugin by Threeformed, a canadian media company.
But I ran into problems integrating their plugin with WordPress’ noConflict function and had to modify all the calls to « $ », into « jQuery ». It then worked out, but I needed to be able to design it via CSS independently of the vertical scrollbars. In order to do that I added a second CSS selector, through which I was then able to design the horizontal scrollbars using other background images than for the vertical ones.
One strange thing however is that this plugin expects the element you want to add scrollbars to to be set to « float:left », otherwise it has problems calculating the initial width of the horizontal scrollbars.
You may download my modified jQuery plugins here.
I am calling the plugin the following way :
var $j = jQuery.noConflict();
var originalSizes = new Array();
$j(function(){
jQuery('.scroll-horizontal-pane').jScrollHorizontalPane({scrollbarHeight:10});
});
The corresponding CSS could look something like this :
.jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
outline: none;
}
.jScrollPaneTrack {
position: absolute;
cursor: pointer;
right: 0;
top: 0;
height: 100%;
width: 10px;
background: url(track-vertical.jpg) repeat-y;
}
.jScrollHPaneContainer .jScrollPaneTrack {
left: 0;
bottom: 0;
right: auto;
top: auto;
width: 100%;
height: 10px;
}
.jScrollPaneDrag {
position: absolute;
background: url(cap-vertical.jpg) repeat-y;
cursor: pointer;
overflow: hidden;
}
.jScrollHPaneContainer .jScrollPaneTrack {
background: url(track-horizontal.jpg) repeat-x;
}
.jScrollHPaneContainer .jScrollPaneDrag {
background: url(cap-horizontal.jpg) repeat-x;
}
Hi all.
I’ve trying to implement it and I have problems with that.
Wich is the best way to call the two jquery functions?. I mean, this is correct?:
var $j = jQuery.noConflict(); $j(function(){ jQuery('.scroll-pane').jScrollPane({scrollbarWidth:10}); }); var $k = jQuery.noConflict(); var originalSizes = new Array(); $k(function(){ jQuery('.scroll-pane').jScrollHorizontalPane({scrollbarHeight:10}); });————-
I have only one content called:
—–
If I comment this one:
var $j = jQuery.noConflict(); $j(function(){ jQuery('.scroll-pane').jScrollPane({scrollbarWidth:10}); });The horizontal scrollbar works and the if I comment the other call the vertical horizontal works right.
Do you have some idea what is my problem?.
Thanks a lot!
Hi Raoul,
What you wrote seems correct to me. However, actually, this is the WordPress way of calling a jquery function. So I suppose, that you use WordPress. If not, you do not need to write the noConflict stuff and you can use « $ » instead of « $j » and « $k » afaik.
Also, if you do not use WordPress, you should use the original plugins I guess.
At some point, I also had the problem that only one of the scrollbars showed up. It turned out however, that this was a CSS problem.
Maybe have a look at this particular page : http://vizet-architectes.fr/2010/04/bmac/
Hope this helps.
Hi Rike.
I’m taking a look and your link is perfect to me. Simply perfect!!!. You’d be right about that the css probably is the problem.
I’m going to review it and I’ll compare with some code of your link.
Thanks a lot for your big help!!!
Hi Raoul,
Yeah, it took me several days to get it to work :)
In case you do not use WordPress, you should rather use
the original plugins. I remember having modified them slightly because
it did not work correctly in Internet Explorer.
As you can see here :
https://svn.manurevah.com/trac/mule/changeset/264/web/jquery/jScrollHorizontalPane.js
I commented the lines that have a special treatment for IE, Opera and
Safari, because for me it worked without this. I don’t know on which
platform you work. But maybe this may also be of concern!
Good luck :)