CODEWITHSUNDEEP
javascriptjqueryjquery-jscrollpane
jbx
jbx

Reputation: 22128

JQuery jscrollpane horizontal scrollbar does not appear without hardcoded width in CSS

I have 2 nested DIVs, with the inner one having images of fixed height (but arbitrary width) aligned one near each other horizontally.

I want to use jScrollpane so that there is horizontal scrollbar to display the images outside the viewport of the div. The list of images is not known beforehand, it will come dynamically from a CMS, so I cannot hardcode the width of the internal DIV in the CSS.

When I harcode the width of the internal div the horizontal scrollbar works fine. However, the moment I remove it the horizontal scrollbar disappears, even though the DIV has display:inline-block and I checked through Chrome's element inspector that its width is in fact expanding.

I also noticed that when I pass the autoReinitialise: true property to the jscrollpane, the horizontal scrollbars appear after a few seconds. But it seems this slows everything down because it keeps checking every few seconds.

What is the right way to make the jScrollpane realise that the internal div is larger than the outer scrollable div?

I have created a JSFiddle here: http://jsfiddle.net/793CB/1/

I have put a comment in the CSS (last line) which shows the fixed width, and if removed demonstrates the problem.

Upvotes: 0

Views: 1271

Answers (1)

Dom Day
Dom Day

Reputation: 2562

The images aren't loaded yet when you initialize the scroller, so the width isn't available. This seems to fix it: http://jsfiddle.net/793CB/3/

$(window).load(function () {
        $('#scroller').jScrollPane();
});

... on $(document).ready(), DOM is loaded, but images may still be in progress

Upvotes: 1

Related Questions