Scrollbar outside of content div

[Tyler]

Hi

I've had a look for the answer but with no luck so far.

At the moment the scrollbar and arrows are postioned inside the same
div as the scrollable content - which in most cases makes sense. I
want to know if there is a way to place the scrollbar and arrows
outside of this div in a different location in the html page? Is there
a way to specify the place they should go?

Example:

<div id="content">
Lorem ipsum....
</div>
[other html other html and content other html]
<div id="">
### scroll bar and arrows here ###
</div>

Any help much appreciated, or a link to the answer that I've missed
would be equally helpful. I'm using jquery1.4.3 and jScrollPane -
v2.0.0beta6


Thanks very much
Tyler

[Kelvin Luck]

Hi,

Unfortunately that isn't currently supported. There are a few of ways you could attempt to achieve it:

1. Use absolute positioning on the jspVerticalBar and/or jspHorizontalBar and try to move them so that they appear elsewhere in your document.
2. If you are only interested in the arrows then you could easily hook some different buttons up to the API so that they called scrollBy to do the scrolling [see http://jscrollpane.kelvinluck.com/scroll_to.html ]. Additionally you can hook up to the jsp-scroll-x/y events to mark your homemade arrows as disabled when relevant [see http://jscrollpane.kelvinluck.com/events.html ]. And you would use CSS to hide the "real" scroll bar and arrows.
3. You could try using javascript to move the elements (e.g. something like $('#myDiv').append($('.jspVerticalBar')); ) - no guarantees this won't have some strange side effects though!

Hope it gives you some ideas. If you want to add this as a feature request on the github issues list then I'll try to look at it in the future (it'll won't be soon though - I'm really busy with client work at the moment),

Cheers,

Kelvin :)

[Tyler Kraft]

Hi

Thanks for the response. I somehow suspected those might be the answers :-(

1)  I can't use absolute positioning due to the fact that the .jspContainer has it's css set to relative and it's overflow set to hidden (which are essential for it to work ;-) )

2) sounds like it may work but I don't think I'm nearly adept enough to make it happen.

3) yeah I thought of that and wondered if it might be the solution - but like you mention I fear it is going to have some crazy effect.

On a side note I think there might be a small box model bug in the extension. If my div that I wnat to have the scroll applied to has a set height and padding set then the height changes when the plugin is instanced.  If I have <div style="height:400px;padding:12px;"> therefore it has a total height of 424px. But when the plugin is instanced the height stays at 400px but the padding is respected and applied to the inner div that scrolls so it still is there - the problem is that the overall hieght is now only 400px.

I solved that with $('#maincol').css('height','424px').jScrollPane({showArrows: true});

I'll add the feature request to github.

Cheers,
Tyler

--
You received this message because you are subscribed to the Google Groups "jscrollpane" group.
To post to this group, send email to jscro...@googlegroups.com.
To unsubscribe from this group, send email to jscrollpane...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jscrollpane?hl=en.

[Tyler Kraft]

Hi

Ok based ona  first try using $('#scrollbar').append(    $('.jspVerticalBar') ); This seems to work in FF3.6 and if I get it working relatively well x-browser I will update on the results.

Thanks