Scrollbar Visibility with jScrollPane

great tutorials, almost the same like FB scroll pane.. 😀 hahha.. anyway this is awesome now i can make my blog looks more elegant with the Jscrollpane 😉 thanx ML you’re the best!

eshanne.

Great tutorial and veru useful too but it doesn’t seems to work on internet explorer !

Do you know how to fix it ?

Thanks for your help !

The demo works perfectly in Internet Explorer 6, 7, 8 and 9.
The scrollbar looks slightly different (no rounded corners) in the older versions, but besides that it works like a breeze.

Thanks for the great tutorial, amazing work!

m.

How about Horizontal scrolling?

@KULDEEP DAFTARY jScrollPane support horizontal scrolling too. Check its demo here
http://jscrollpane.kelvinluck.com/basic.html

great article.. nice plug-in.. wud like to know more about the browser compatibilty…

Can this be made in to a auto-ticker?

Can I use it for my website?

Great, but how do I use more than one on a page?

Hi Mary,
Thanks for your awesome tut.
I tried to get this extension working on multiple instances.
The first element works but the others not.
Can you help me? Thanks a lot

Hello Mary! Great tuttorial!

If in css

.jp-container{
width: 100%;
….
}

and resize the browser window, the width of the panel does not change dynamically. Only after reloading the page.
How to do it right?

Hi, I tried to set the example for my needs but it does not work,
I control my site sizes by percentage and not pixels, that to fit any resolution,
I changed only one property in the css but does not generate the scroll

.jp-container
{
width: 500px; /*aca modificacion*/
height:100%;
position: relative;
background: #fff;
border: 1px solid #D8DFEA;
float: left;
}

when the property is by HEIGHT pixels if it works, but I need to handle by percentage,

before was the height at 500px

Thank you.

With the latest jquery (1.7.2 as of this day) the scrolling with mouse wheel is not working with IE and FF.

Heya Mary Lou, i’m with a big problem here because i dont know what i need to do to resolve this. When i put the javascript function on the page, the page loads with a WINDOW: “AJAX ERROR: blank” as you can see in http://www.thehitz.com.br/loja.php. What can i do to remove that?

The javascript:

$(function() {

// the element we want to apply the jScrollPane
var $el = $(‘#conteudo-container’).jScrollPane({
verticalGutter : -16
}),

// the extension functions and options
extensionPlugin = {

extPluginOpts : {
// speed for the fadeOut animation
mouseLeaveFadeSpeed : 500,
// scrollbar fades out after hovertimeout_t milliseconds
hovertimeout_t : 1000,
// if set to false, the scrollbar will be shown on mouseenter and hidden on mouseleave
// if set to true, the same will happen, but the scrollbar will be also hidden on mouseenter after “hovertimeout_t” ms
// also, it will be shown when we start to scroll and hidden when stopping
useTimeout : false,
// the extension only applies for devices with width > deviceWidth
deviceWidth : 980
},
hovertimeout : null, // timeout to hide the scrollbar
isScrollbarHover: false,// true if the mouse is over the scrollbar
elementtimeout : null, // avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
isScrolling : false,// true if scrolling
addHoverFunc : function() {

// run only if the window has a width bigger than deviceWidth
if( $(window).width() <= this.extPluginOpts.deviceWidth ) return false;

var instance = this;

// functions to show / hide the scrollbar
$.fn.jspmouseenter = $.fn.show;
$.fn.jspmouseleave = $.fn.fadeOut;

// hide the jScrollPane vertical bar
var $vBar = this.getContentPane().siblings('.jspVerticalBar').hide();

/*
* mouseenter / mouseleave events on the main element
* also scrollstart / scrollstop – @James Padolsey : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
*/
$el.bind('mouseenter.jsp',function() {

// show the scrollbar
$vBar.stop( true, true ).jspmouseenter();

if( !instance.extPluginOpts.useTimeout ) return false;

// hide the scrollbar after hovertimeout_t ms
clearTimeout( instance.hovertimeout );
instance.hovertimeout = setTimeout(function() {
// if scrolling at the moment don't hide it
if( !instance.isScrolling )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
}, instance.extPluginOpts.hovertimeout_t );

}).bind('mouseleave.jsp',function() {

// hide the scrollbar
if( !instance.extPluginOpts.useTimeout )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
else {
clearTimeout( instance.elementtimeout );
if( !instance.isScrolling )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
}

});

if( this.extPluginOpts.useTimeout ) {

$el.bind('scrollstart.jsp', function() {

// when scrolling show the scrollbar
clearTimeout( instance.hovertimeout );
instance.isScrolling = true;
$vBar.stop( true, true ).jspmouseenter();

}).bind('scrollstop.jsp', function() {

// when stop scrolling hide the scrollbar (if not hovering it at the moment)
clearTimeout( instance.hovertimeout );
instance.isScrolling = false;
instance.hovertimeout = setTimeout(function() {
if( !instance.isScrollbarHover )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
}, instance.extPluginOpts.hovertimeout_t );

});

// wrap the scrollbar
// we need this to be able to add the mouseenter / mouseleave events to the scrollbar
var $vBarWrapper = $('’).css({
position : ‘absolute’,
left : $vBar.css(‘left’),
top : $vBar.css(‘top’),
right : $vBar.css(‘right’),
bottom : $vBar.css(‘bottom’),
width : $vBar.width(),
height : $vBar.height()
}).bind(‘mouseenter.jsp’,function() {

clearTimeout( instance.hovertimeout );
clearTimeout( instance.elementtimeout );

instance.isScrollbarHover = true;

// show the scrollbar after 100 ms.
// avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
instance.elementtimeout = setTimeout(function() {
$vBar.stop( true, true ).jspmouseenter();
}, 100 );

}).bind(‘mouseleave.jsp’,function() {

// hide the scrollbar after hovertimeout_t
clearTimeout( instance.hovertimeout );
instance.isScrollbarHover = false;
instance.hovertimeout = setTimeout(function() {
// if scrolling at the moment don’t hide it
if( !instance.isScrolling )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
}, instance.extPluginOpts.hovertimeout_t );

});

$vBar.wrap( $vBarWrapper );

}

}

},

// the jScrollPane instance
jspapi = $el.data(‘jsp’);

// extend the jScollPane by merging
$.extend( true, jspapi, extensionPlugin );
jspapi.addHoverFunc();

});