jScrollPane 1.2 released

November 7th, 2008

I’ve just released a new version of jScrollPane – my jQuery plugin for cross-browser customisable scrollbars. It’s been a long time since the plugin has been updated and this release contains a number of significant improvements:

a jScrollPane now correctly scrolls when you tab to a focusable element within it [example]
a jScrollPane can now automatically re-initialise itself when images inside it load [example]
external (and internal) links to an anchor within a jScrollPane now correctly scroll the jScrollPane [example]
defaults settings are now user-settable [example]

In addition to these changes, jScrollPane now has a new home on googlecode. This makes it easier for people to keep up to date with the latest version and more importantly it makes it easier for me to track bug reports and issues with jScrollPane (something that was basically impossible on the jQuery plugins site). As you can see, there is already a number of issues raised (one of which has high priority) so there may well be a bug fix release soon. In the meantime, it would be good to get people testing the new release and seeing if I broke anything else while implementing these changes…

Update:

jScrollPane 1.2.1 was released very shortly after 1.2 to fix a fairly serious bug which prevented links within the scroll pane from working correctly. As always, the googlecode site has the latest version.

In: javascript, jquery | tags: javascript, jquery, jscrollpane, sourcecode. | #

26 Comments, Comment or Ping

ezilarsan

i am using
jquery-1.2.6.min.js
jquery.mousewheel.js
jScrollPane-1.2.2.j
i am using example : #pane3
here jScrollPaneDrag does not goes beyond 200 px even though i have set the height to 300px.

Could tell how to take Pane Drag down to the bottom of the scrollpane.
regards

December 5th, 2008
Kelvin Luck

Hi Ezilarsan.

Can you provide a URL showing your problem? Then I may be able to help you. Without a URL it's impossible for me to tell what's going wrong!

Cheers,

Kelvin :)

December 5th, 2008
Björn Ekelöf

I like the new jSrollPane, it seems that you have taken out all the bugs that existed.
Thanks for making good working code.

December 8th, 2008
Sarfrazs

Hi Kevin,

Your efforts are great no doubt. But there is little request for you. Kindly made your script compatible with horizontal scroll bar as it is one of the most missing part of your script. I hope it wont be so complicated for you as you mentioned in you previous release.

It would be highly appreciated and thanks again for doing such a wonderful work.

Regards,
Sarfraz

December 31st, 2008
henk

jscrollpain u mean, ever tested it?

February 25th, 2009
Kelvin Luck

Hi Henk,

Yes, I've tested it many times in many situations as have many many other people who are happy with it and using it on their sites... If you are having some problems then please open up an issue on googlecode ( http://code.google.com/p/jscrollpane/issues/list ) and I can try and help you fix it. That's probably more constructive than a comment like above...

February 26th, 2009
John

Is it possible to use jScrollPane in combination with Styleswitcher instead of the jQEm plugin?

April 10th, 2009
Kelvin Luck

Hi John,

It's certainly possible to use jScollPane in combination with my styleswitcher jquery plugin - is that what you mean? I'm not sure what you mean by "instead of jQEm" though...

If changing stylesheet with the switcher means that the size of the contents of your scrollpane has changed then you will need to reinitialise the scrollpane after changing the stylesheet. Apart from this everything should "just work". If you are having problems please provide a URL showing the problems and I'll try to help...

Cheers,

Kelvin :)

April 10th, 2009
Dale Larsen

I have implemented you scrollbars inside of the jquery ui layout plugin by Fabrizio Balliano and Kevin Dalman. Awesome plugin! See what I mean:
http://layout.jquery-dev.net/demos.html

I cannot seem to get the scroolbars to appear inside a pane that is scrollable. I can use the mousewheel and it scrolls but no scroll bars?

You can see me demo here:
http://dalelarsen.com/beta13/test.php

April 28th, 2009
Kelvin Luck

Hi Dale,

Can you please repost your question on the new jScrollPane mailing list:

http://groups.google.com/group/jscrollpane/

I am moving all support for the scrollpane over there now,

Thanks,

Kelvin :)

April 28th, 2009
Lenny

Hello,

thanks for the great plugin!

Although, I've a one problem with it - the "disabled" (the disabling of arrows when scrolling to the end/start of content) function does not work.

Maybe I'm doing something wrong, but unfortunately I can't find some more indepth docs about it. By studying code, I've discovered that there's a function that adds/removes class called "disabled"...but I cannot get it to work - maybe I'm doing something wrong within my css, but cannot figure out what.

My idea was do something like:
a.jScrollArrowUp {

background-color: blue;
}
a.jScrollArrowUp:hover {

background-color: green;

}
.disabled{
background-color:yellow;
}
The blue & green works perfectly, but yellow never appears...

I fixed by creating extraclass called "enabledArr", deleting the jScrollArrowUp from css and adding line similiar to
$upArrow[destY > 0 ? 'addClass' : 'removeClass']('enabledArr');
in the jScrollPane.js

This works great, but it's not an ideal "clean" solution...

So, am I doing somethin wrong from the start, or maybe it's some bug?

Tested on FF3/Linux Ubuntu

Thanks for replies,
L.

June 30th, 2009
Kelvin Luck

Hi Lenny,

Your problem is that you aren't taking into account the specificity of CSS rules. Bascially, the more specific CSS rules will override the less specific ones. And in your example, "a.jScrollArrowUp" is more specific than ".disabled" and so overrides it. I should probably have included some examples of using the disabled styles - I will try to add these in soon.

But if you change your disabled rule to:

a.disabled {

And place it lower in the CSS file than the a.jScrollArrowUp rule then it should work.

Hope that helps,

Kelvin :)

June 30th, 2009
Lenny

Hello,

thank you so much, works like hell!

I thought that I'm missing something:-)

Just one mor tip (for some other who may have same troubles, or for you to include it in a example): need is also add a.disabled:hover with the same background as a.disabled, to avoid hovering disabled arrow.

Again, thank you sou much for help & this great plugin!
L.

July 1st, 2009
hors3

Hi!!
Thank U for that plugin, it's help's a lot!
We used it for ex. here:
http://www.deputamadre69.hu/s#termekek/regisztracio.html

I modified a little, but the basic is your's!

BB

July 8th, 2009
Kelvin Luck

Hi BB,

Thanks for the link - that's a really nice and original implementation!

Kelvin :)

July 8th, 2009
Aidan Host

Hi,

I was wondering if it is possible to determine if the div has a scrollbar, either with a property or a method?

When I try to run .scrollTo() when there is no scrollbar I get an error that scrollTo is not a function. So to prevent the error, is there a check that I can do before I call .scrollTo()?

Awesome plug-in by the way.

Thanks

August 27th, 2009
Aidan Host

Hi,

I managed to determine if the scroll bar is present by checking:

if ($(".jScrollPaneTrack").length > 0)

Thanks

August 27th, 2009
Kelvin Luck

Hi,

That'll do it if there is only one scrollpane on your page. You you could do:

if ($('#yourDivID').parent().is('.jScrollPaneContainer'))

Cheers,

Kelvin :)

August 28th, 2009
Omar Colocci

Hi Kelvin!

Great plugin you made! I started testing it with a WordPress theme I'm working on and everything is ok on my local setup (localhost) both on Mac OS X and Windows + WAMP, but when I use the theme on Dreamhost it looks just like if all the jQuery code is ignored. The pages on localhost and dreamhost render equivalent and all the paths are correct, so I don't know what's happening. Any clues?

Thanks in advance!

September 3rd, 2009
Kelvin Luck

Hi Omar,

Did you upload the jQuery file and the other js files? That's all I can think of... If you are still having problems please ask on the jScrollPane google group and maybe provide a URL:

http://groups.google.com/group/jscrollpane/

Cheers,

Kelvin :)

September 4th, 2009
Razvan Ioan

Hello again Kelvin,

I'm using now your latest version of JScrollPane. It works perfect.

I only want to say that I've added "outline: none;" to your .jScrollPaneContainer from jScrollPane.css file. This prevents FireFox to add that nasty dotted border on the content DIV if you click inside. This solves the problem.

Thanks,
Razvan

November 29th, 2009
Kelvin Luck

Hi,

Glad it's working for you :) The outline is useful if you are using keyboard navigation as it shows that the scrollpane is active and the arrow keys will scroll... But "outline: none" is a good solution if you aren't interested in this,

Thanks,

Kelvin :)

November 29th, 2009
Jason

Razvan Ioan, thank you for that outline:none tip. The border had always bothered me.

I have another problem, though. I'm trying to embed flash video files (from YouTube, etc) in the pane, but when you scroll up, the video is not hidden-it scrolls all the way to the top of the page. Any help?

January 24th, 2010
Kelvin Luck

Hi Jason,

You need to set a wmode on the flash so that it is properly hidden in "overflow: hidden" elements. More info here:

http://code.google.com/p/jscrollpane/issues/detail?id=82

Hope that helps,

Kelvin :)

January 24th, 2010
Zil

Hi Kelvin,

I have anchors used inside the scroll div which links to the different parts of the same contents inside the div, while clicking on any of the anchors the scroll bar disappears, while clicking again inside the content the scrollbar appears, please help me to get rid of this.. Thanks in advance...

April 27th, 2010
Kelvin Luck

Hi Zil,

The proper place to get support for jScrollPane is the google group:

http://groups.google.com/group/jscrollpane/

Cheers,

Kelvin :)

April 28th, 2010