kelvinluck.com

Hi,

The mint script is just the stats tracking package I use on my site. It shouldn’t effect how the scroll pane scripts work… Do you have a URL to your page which isn’t working in Safari and maybe I can help you debug?

Cheers,

Kelvin :)

Hi, great script but I need Panetrack on the left side, can You help me :)

regards
Pawel

Hi, is it possible to use it for a horizontal-scroll?

Best regards

Hi Nick,

Did you see this example?

http://kelvinluck.com/assets/jquery/jScrollPane/textSizeChange.html

Cheers,

Kelvin :)

Hey Kelvin,

Nice plug-in. Im using scrollpane for thumbnails in an image gallery. On clicking a thumbnail the page is refreshed and the image is displayed in a view pane. If the thumbnail clicked is outside the intial window pane( ie had to scroll to get to it) then the scrollbar looses position after refresh. Any ideas

Hi Nick,

Sorry for the slow reply, I’ve been really busy. Unfortunately I don’t think the scrollpane will work elastically as it currently is. There is a support ticket with a similar request here too:

http://plugins.jquery.com/node/1790

I’ll try and look into it when I get a spare minute. In the meantime you could try listening to the window resize event and reinitialising the scrollpane then (like in my full body scroll example)

Hope that helps,

Kelvin :)

I was wondering if you had a scroll bar that would work on the horizontal axis instead?

Thanks
Mike

Is this a free downloadable open source plugin to use or licenced?

Thanks
Amarnath :)

Hi Kelvin! First of all, really nice script!
Did you have any complains about it used on a modal thickbox window? Because i could make it work on a single page but once i try it on thickbox it doesn’t shows any of the div’s contents and a JS “invalid argument” error is shown on the opener window.

I would appreciate any help on this. No rush at all!

Also, great pics!

Greets from Argentina, Diego.

Hi guys,

@Diego – I think it should work in a thickbox window as long as you initialise the scrollpane after opening the window… Do you have a test URL I could look at to maybe see what’s going wrong?

@wilson – Sorry, there is currently no keyboard control for the scroll pane. You could set up your own keyboard listeners which would use the scrollBy functionality of the plugin to control the jScrollPane,

Hope that helps,

Kelvin :)

Any idea why the script rarely although sometimes works on http://www.lionsbreath.ca/teachertraining/ but seems to always work on http://www.lionsbreath.ca/classdescriptions/ If you have an answer I would be happy to compensate you. Thanks.

hello.

i’m trying to use the scrollbar for a horizontally scrolling div, rather than a vertical one. is this possible?

thanks a lot.

Awesome script Kelvin! Thanks for sharing.

To all the people asking for a horizontal version, someone made a mod: http://plugins.jquery.com/project/jscrollhorizontalpane

Hi Kelvin,

We found a Problem when using jScrollPane on a div thats not displayed.

< div style="display:none">
< div class="scroll-pane">
some stuff
< /div>
< /div>

then an error occured in ie6 and ie8 (we did not test ie7). The developer toolbar in ie8 told us about an Illegal Argument (I hope thats the right translation) in line 115: ”$this.css(cssToApply);”.
This comes because of an error in jquery.pack.js in line 1, character 13287: “d[f]=c;return d[f]”
Illegal Argument
>>d
{...}
>>f
“width”
>>c
”-12px”

In FF everythink works.

We’re using jquery 1.2.6 and jScrollPane.js 4765 2008-02-17 21:14:59Z

Thanks for the great plugin!

HI everyone - sorry for the very slow replies!

@John Allan - I'm not sure I'm afraid... It seems to work fine on both links for me now... Are you still having problems?

@Wilson - something like the following should work (where selector selects the element you tried to apply jScrollPane to):
if ($('SELECTOR').parent().is('.jScrollPaneContainer'))

@Tudor - Sorry, not currently. I believe someone else modified jScrollPane to add that functionality though (in fact, Mark S links to it above).

@Chad Davis - It's not something I'm aware of... Are you still having issues with the latest jQuery?

@Florian - Maybe the problem is that you are not waiting until the AJAX content has loaded before you apply jScrollPane? If you can provide a test URL then I may be able to help more...

@Tobi - That sounds like a genuine issue - I've raised a ticket for it: http://plugins.jquery.com/node/4691 . In the meantime did you try showing the parent div before applying the scroll pane and then hiding it directly afterwards?

@Paco - AFAIK the scrollpane should work fine in IE. Can you provide a URL where it is failing? Which version of IE are you using?

I'm going to try and go through the bug reports on the plugins site now and do some fixes - let me know if there are any more problems...

Hey Kelvin,
I'm having some trouble using jscrollpane in conjunction with a thumbnail image links. My scrollable area contains a serious of thumbnail pictures and when you click on a thumbnail, the larger version of the image appears on main section of the page. The scrolling functions are working great but when I click one of my thumbnails, it forces that image to scroll to the top of the scrollable area and then I have to click it again to get the large picture to show up.

Basically, the large image event won't happen unless the corresponding thumbnail is at the top of the scrollable area. When I disable jscrollpane in my script and just use the browser default scroll bar, everything works just fine.

Do you have any idea what could be causing this?

And this you'll always see... look at it for hours and right when you ask for support, it works afterwards :$.
I think (not sure) it was because I switched the order: I had put my styles files below my script files in the header, instead of the other way around.
Sorry for bothering, but still wanted to say: wonderful script!!

Hey Kelvin,
Great plugin, flexible, very nice!
I found that some clients like a single shaped drag handle nicer. Changed 'dragH' to a set size (line 289) and it works like a charm.
Maybe a good one for the options? {dragFixedHeight:10}

thanks,
Maarten

Somewhat ridiculous question. I don't have the page uploaded as yet Kevin but I cannot seem to make 2 matching scrolls function on a page.?

Got one ... it's exactly what I need. It's your Basic example pane 2.

Using exactly the same tags on a second scoll on the page I get nothing but standard vertical and horizontal scrollbars?

Hi Kelvin, I just wanted to say thanks. I've successfully included your plugin in the application I was creating, and your code is so cool that it was quite easy to modify. For example, I had UL items as folding menus and I needed to assign the id of the UL menu to the wrapping divs.
I've tested your plugin in IE6, 7, O9.62, S3.11, Ch, FF3,2 and it works sweet everytime. Thanks again Kelvin.

Hey Elliot,

Sweet - glad you liked it! Thanks for letting me know :)

Hello, Kelvin!

Thank you for this great plugin! I have a question, similar to Maarten Wolzak's question about customized ScrollPaneDrag height. Setting min and max height are working fine, ScrollPaneDrag displays correct (for example, I use 16x16 picture), but when I press mouse at ScrollPaneTrack, it works like real height of ScrollPaneDrag is not 16 pixels. Could you, please, add examples of using different heights of ScrollPaneDrag.

Thank you very much!

Hi Kelvin,

This is a really great plugin; thanks so much for making it! We use it a lot in the Smithsonian's Freer-Sackler Asian Ceramics Gallery website.

Through the course of making the website I've fixed several bugs in the scrollpane code. The most annoying one is that anchor links don't work properly if they are inside the scrollpane; you have to use some crazy anchors with classes and the links have to be special JavaScript calls. Not the ideal for people without Javascript or staying standards-compliant.

I have written a function that fixes this and allows you to use normal anchor links anywhere on the page, like the scrollpane wasn't even there. You can find the code on my blog: http://phreakhead.livejournal.com/74276.html.

I hope you think this is a good addition and perhaps you will include in future releases. Thanks!

I'm trying to use multiple instances of the jScrollPane on the same page. The page has an ASP Tab Container with two tabs, both using the scroll pane. and a seperate panel with the scroll pane next to the tab container. Everything works great in FF, Safari, and Chrome. In IE however, only the first scroll bar works. The others fail when trying to retrieve the InnerHeight() and InnerWidth() both of which return 0. This causes the CSS that is passed to the elements to have negative heights and widths which causes a failure and none of the content in the panes is displayed. If another call is made, say a modal pop up the scroll bars work. Any insight or do you need more info?

@Anne-Lies
Thank you! When I place the stylesheet before the script my trouble with strange width after reload dispersed!

Hi Mick,

It looks like your page also includes Scriptalicious so you will need to use jQuery.noConflict() and then change your references to $ to be to jQuery instead e.g.

jQuery(function()
{
jQuery('#biopage').jScrollPane();
});

Hope that helps,

Kelvin :)

Kim.

Thanks for the input, I'm afraid I don't know what you mean by " jQuery.noConflict()".

I've tried enabling arrows but this doesn't work, perhaps that's the conflict you are referring to, again any help appreciated.

Mick

Hi Mick,

Google is your friend:

http://www.google.ca/search?q=jquery+noconflict&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-GB:official&client=firefox-a

Hi Kelvin…

I’m wondering if you or someone else has run into a problem I’m experiencing and if there’s a workaround. The script works great, but I’m trying to implement it in a tab-box display. I have two tabs and inside of each there will be an implementation of jScrollbar. I’m using jQuery UI Tabs to control the functionality of the tabs. All content for both tabs loads on the page, but tab two content is set to ‘display:none’ - which is changed via JS when tab two is activated. Because of this, anything inside of the scrollbar container in tab container two disappears when the page loads and does not display when tab container two is activated. Good grief… I hope I didn’t lose you there. Does this make sense at all? If not, let me know and I’ll try to throw up and example for you to see.

Thanks

Hey RSBomber,

Yes - it's a problem that lots of people have run into... I put together an example which shows how the tabs plugin and jScrollPane can work well together:

http://www.kelvinluck.com/assets/jquery/jScrollPane/tabs_example.html

The basic idea is not to actually hide inactive tabs and comes from this example on the tabs page:

http://docs.jquery.com/UI/Tabs#...my_slider.2C_Google_Map.2C_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F

I'd like to put together some more robust functionality for "make jScrollPane work when applied to hidden elements" but I'm having trouble finding a way to implement it without using a timer which seems kinda dirty to me...

Anyway - hopefully the example will help in your situation,

Cheers,

Kelvin :)

Hey Sheldon,

Glad you like the script...

I'm not sure I entirely understand what you are trying to do - if you have a URL it may help...

What you are describing should be possible though by listening to 'scroll' events on the jScrollPaned element and passing a message to the other window so it could call a scrollTo on the other content...

Hope that helps,

Kelvin :)

Brilliant! Thanks for the description and links. You rock!

Hey there

First of all thank you for all your work you out in this plugin.

I have a question that I hope you can help me with.
I have made a site, and used your plugin. I have used both the version where you can import content through AJAX, and at the same time I would like the scroll-bar to automatically update, when an image has loaded, because most og the content are images.

But it doesn't seem to work :(

I have changed in the 'reinitialiseScrollPane'-function that is used for the AJAX, and it now looks like this:

reinitialiseScrollPane = function()
{
$('#pane1').jScrollPane({scrollbarWidth:5, wheelSpeed:20, reinitialiseOnImageLoad: true});
}

But it doesn't work. Do you have a solution or a gues to what the problem might be?

Best regards and thanks again
Kim Andersen

Hi Sheldon,

I've just updated the chat example with the functionality you describe... I had to make some changes to jScrollPane itself as well so you'll need to grab the latest version of that too...

Cheers,

Kelvin :)

Hello Kelvin,
Lovely plugin. I approached a project with no previous jquery knowledge and your plugin and example pages really helped. Thanks so much.

Hola Nicolas (from Argentina) :D

You can bind an event listener for the "scroll" event - this will be fired every time the scollpane is scrolled,

Cheers,

Kelvin :)

Hi Kevin,

I have an unusual need for a scroll pane within a . Is this possible?
Obviously I have tried but not succeeded (yet). Please advise.

Thanks.

Hi Forrest,

You need to fit the scroll pane into a dot? Only joking but it looks like my blog stripped out whatever tag you want to fit the scroll pane into - can you clarify?

Cheers,

Kelvin :)

Hi Sabrina,

I'm afraid that it's almost impossible for me to guess what is going wrong without a sample page...

Does your page work if you don't initialise jScrollPane? The element should have overflow:auto so you should see default scrollbars if you don't initialise jScrollPane... Does the element you are scroll paning have a width and height? Is it hidden when you try and initialise the scrollpane? Are there any errors produced by your page?

Hope one of those helps,

Kelvin :)

I do not know why but in Safari sometimes when I would refresh the page it appeared as if jScrollPane calculated the jScrollPaneContainer size incorrectly - consistently too large - and because it was too large, the scrollbar would be hidden by the overflow:hidden setting I had on my .holder div (like in your examples only with the overflow set to hidden and a manual size).

The only way to fix this was to change line 143 or jScrollPane.js from
if (percentInView < .99) {
to
if (1) {
The way I determined this would fix it was by manually creating a jScrollPaneContainer div around the .scroll-pane div and set the width manually (which still got overwritten by .js), and I noticed that when the width was calculated incorrectly it wouldn't add the scrollbar - so I forced it to always add the scrollbar and since then I haven't been able to reproduce the incorrect size calculations.

I really don't know why the dimensions would randomly get calculated wrong in Safari - maybe partial caching? Anyways, I realize this makes scrollbars always visible, but that's fine on my site.

OK, well my "fix" didn't fix it because Safari would still occasionaly make the scrollpane width way too wide. What I ended up doing was specifying the padding and margin for the holder and the pane because I suspect maybe Safari was providing incorrect numbers for those for the scroll pane size calculations - in the section where it calculates how to adjust the pane size for adding the scroll bar.

Also - IMPORTANT NOTE TO YOU SAFARI PEEPS - be sure to set the width and height attributes of the images in your scroll pane because if you don't Safari will incorrectly calculate the height of the scroll pane around line 140:

var contentHeight = $this.outerHeight();

I found that adding the image and height attributes to my img tags fixed that issue.

Thanks for all your hard work Kelvin! BTW I'm using your scrollpane on this site:

http://sullivanfinerugs.com

Hey,

sorry for my late answer, I was ill and couldn't work. It was a simple fault I didn't recognize: the div had the attribute display:none which wasn't changed during a fade-in.
Now it works fine with half of my site. I've still got problems with CollapsiblePanels, but I know the reason and I'm trying to fit it.
Thanks for your excellent work :D

Greetings,
Sabrina

Hey Kelvin,

Great plugin! I've been using it on a mini-project I've been working on to provide a custom look to drop-down form elements (among others). I'm having great success thus far, but have run into a very strange problem. I have an unordered list which is wrapped in a div. I then apply jScrollPane to the unordered list inside. Seems to be working great, except...

Whenever I have list items with spaces in them, jScrollPane somehow calculates that it needs the track and arrows when it really doesn't. To demonstrate, I've posted a page: http://jonlinczak.com/jscrollpane/.

Underneath the Expiration date fields are two 'Select a Question' fields. They are both identical, except the first one has a space in the middle of the third option, and the second question has no spaces. It's the second question behaving correctly. Have any insight into what might be happening here?

Hey Jon,

Glad you figured it out, sorry I didn't get a chance to look into it for you,

Cheers,

Kelvin :)

Hi Greg,

I can confirm I'm seeing the problem in Safari on windows too. Can you please open a ticket on googlecode:

http://code.google.com/p/jscrollpane/issues/list

And I will look into it and issue a fix,

Thanks,

Kelvin :)

p.s. It's the height rather than the width that looks broken to me...
p.p.s. Is it still broken with the latest jQuery and latest jScrollPane file?

Hi Greg,

Thanks for the ticket - I'll look into it ASAP...

And thanks for the hint on the plugin, I definitely did need it so I've just installed it :)

Cheers,

Kelvin :)

Dear Kelvin,

Trying to implement jScrollpane with UI Tabs and am running into the problem with the hidden tab.

I tried implementing it by adding a callback function to the tabsshow event but got unpredictable results in IE7.

I saw your example at:
http://www.kelvinluck.com/assets/jquery/jScrollPane/tabs_example.html

But can't find any documentation on you exactly you got it to work.

Any assistance would be most appreciated.

Thanks,

Evan

Thank you for such a quick response. If I could bother you to take a look at the following URL:
http://www.tscplcommunityconnect.com/beta/scrollpane_iso.htm

I've pulled the tabs and the jScrollpane out the rest of the layout to more clearly illustrate the problems I'm having.

Any tips would be most appreciated as for the life of me I can't figure out what is wrong.

Thanks in advance!!

-Evan

Sorry Kelvin...moved it and forgot to update you:
http://www.tscplcommunityconnect.com/internalbeta/scrollpane_iso.htm

Thanks for taking the time!

Problems with in ie7 ver.7.0.5730.11. (danish)
When I include this script on my site, nothing is shown in the browser, but if I chose view source code, the full code is downloaded.

In fact the same problem apears on the frontpage on your site: http://www.kelvinluck.com

Can you tell me whats the problem? And can i use jsscrollpane without the "mint-script"?

I'm having problems with the image drag bar it won't go all the way down or all the way up.

any classic misstake i'm doing?

does function script also in iframe?

Hi P4R4D0X,

Yes - it should. Do you want to make the entire iframe scroll using jScrollPane or do you want a jScrollPane in the content of the iframe? If it's the former then you may want to look at this example which includes full body scroll:

http://www.kelvinluck.com/assets/jquery/jScrollPane/fullBodyScroll.html

Hope that helps,

Kelvin :)

Hello Kelvin

Sorry for my bad English I uses a translator:-)
Thanks for your answer. My problem is, I have iframe with scrolling on "no." in this iframe again still lies iframe with scrolling on "auto", for this iframe I would exchange with pleasure scrollbars. Unfortunately, the idea with fullbodyscroll has not helped me, I think one would have to define for iframe directly scrollbars. Unfortunately, do not point I whether this was generally feasible.

Hi P4r4dox,

I think it is feasible to have jScrollPane make pretty scrollbars in an iframe. You will need to include jQuery and jScrollPane scripts inside the document in the iframe and use the code from the fullbodyscroll example inside the iframe. I think that should work...

Hope it helps,

Kelvin :)

Hi Kelvin

Thanks for the tip, that works perfectly:-)

Sorry, in my last post the link should be:

http://www.fotovakschool.eu/index.php?option=com_content&task=view&id=55244&Itemid=666392#JOSC_TOP

instead of

http://www.fotoschool.eu/index.php?option=com_content&task=view&id=55244&Itemid=666392#JOSC_TOP

Hi I have a question, can it be used in multiple hidden divs inside one page so when the are reveal they are scrollable?

great code, by the way

thanks

Hi All,

@Ros: I think you missed some more of my code which scrolls the jScrollPane on initialisation if there is a hash in the URL. You can see it in action if you visit this URL:

http://www.kelvinluck.com/assets/jquery/jScrollPane/jumpToExternalAnchorExample.html#marker

Search for "location.hash" in the sourcecode to see how it works

@P.J.: No worries - glad you like it :)

@Jorge: Yes it can. There is currently a bug though where an element has to be visible when you initialise the scrollpane. So you will need to make sure that you initialise jScrollPane on each div after it is shown.

@Andrew: Hmmm - that sounds like a problem. Could you open an issue on the googlecode site for this please (and include a demo URL). Then I'll try to find a solution... You could also confirm that FF doesn't display this problem on a normal overflow: auto div. And you could maybe try playing with the wmode of the embedded flash?

Cheers,

Kelvin :)

Hi Ros,

You can anchor to any element with an id. This is my prefered method because it means you aren't adding any extra markup to your page... I don't think jScrollPane will work with p.1 but you could try <A name="anchorname" id="anchorname">. I specifically check for an element with the relevant ID attribute inside the scroll pane - this is a much quicker selector that searching each elements name attribute (as behind the scenes jQuery is able to use getElementById)

Hope that helps,

Kelvin :)

Hi Alberto,

You need to set a wmode on your flash movie. See the googlecode issue:

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

Cheers,

Kelvin :)

Hi Petr,

So you want the height of the scrollpane to be independent of the height of the element it is scrolling? That isn't currently possible with jScrollPane and I'm not sure it is a very normal use-case so I don't know if I would add it in... You should be able to hack it in yourself though...

Cheers,

Kelvin :)

Hi Nicole,

I can't really help without a URL!

Cheers,

Kelvin :)

I just had a look and it looks like you are using scriptalicious on the same page as jquery and jscrollpane. You will need to use jquery in noconflict mode and you will need to use "jQuery" instead of "$" when you are initialising jScrollPane.

Hope that helps,

Kelvin :)

Hi Kevin,
i just wanted to say thanks for the plugin!
i did have an error that someone else experienced above where ie7 doesnt render the scroller correctly, and wanted to give you the fix:

~ line 123:
change
var p = this.originalSidePaddingTotal;

to

var p = (this.originalSidePaddingTotal) ? this.originalSidePaddingTotal : 0;

originalSidePaddingTotal is only set if the parent is not the container, and is undefined in my situation. setting it to 0 where it doesnt exist fixes things downstream

I am developing a site in textpattern, and jscrollpane works great except for one little bug... All subpages on the site shrink by 95% when the javascript is executed. My homepage looks fine. I think there may be some conflict with my stylesheet, but I can't narrow it down to any specific selectors. The problem seems to effect every element on the page

The problem page is at "www.troublmedia.org/troublmag/". User - troubl. Password - introubl. If you click on one of the archives links, or on contact, or about, the page that follows will be a little smaller than the homepage.

Any help towards a solution would be greatly appreciated.

Thanks,

Derrick Meadows
awayfromhear.com

After a second look, removing references to other scripts did not solve my problem. For some reason, subpage content still shrinks onload. I'll be patient for a response this time instead of flooding your comments.

Problem page: troublmedia.com/troublmag/index.php
user name - troubl
password - introubl

If you click on any of the nav links, you'll notice the page resize. Thanks.

Morning Kelvin,

First, thanks for this plugin! :-D

Second, seem to found a few issues which nothing I change seem to fix:

A. If I don't specify an inline width and height for both the parent and scrollpane containers I end up with a situation like PETROCKET above where the container goes very wide, all the text is on single lines, and the scrollbar is hidden by the overflow.

B. With the widht and height specified inline, I then get areas where the content seems longer than actually is, as in there is a lot of "empty" space below the last paragraph; this also ties into the third issue.

C. Now content which should be smaller than the max height set still gets scrollbars, but not every one? I've been able to determine that there were some added paragraph elements and removed them, but this has not solved everything.

And D. In IE6 my arrows flicker as the scroll happens.

Now, I've modified some of the css to allow the same arrow images site-wide, and I added a new setting to the plugin: dragPaneWidth because I was orignally going to use -moz/-webkit-border-radius and make the drag ovalish in shape without using images. But that's it!

So if there could be any help with these I would be immensly grateful!

Link follows in email as usual client NDC issues pertain.

Cheers,
Jon

Hi Spires,

1) This could be to do with the "disabled" state which is added to the arrows when they can't scroll any more. Do you have any css rules related to a class of disabled which could be causing issues? Do you see the problems on my example pages? Can you provide a URL demonstrating the problem?

2) Yes - you need to use the callback to the jquery slide functons to reinitialise the jScrollPane once the resizing is done. You may even want to have a timeout which reinitialised the jScrollPane every 200 milliseconds or so while the animation happens and cancel this timeout in the complete callback.

Hope that helps,

Kelvin :)

Breaks in Safari. Works fine in Firefox, IE, Chrome, Flock.

url - http://www.troublmedia.com/troublmag/

user - troubl
pass - introubl

--------------------

BTW, I commented earlier about page resize issues, where every element on the page shrinks proportionally. That seems to be a browser specific css issue that happens to occur on the same page, but it's unrelated to jscrollpane.

Hi,
I am trying to make a widget using jquery and I am using your scrollpane script. I am embedding everything in one script and scrollpane is not working due to jquery load. Please see this code

document.write('');
document.write('');

when I initialize scrollpane I get jQuery is not defined.
jQuery(function(){jQuery('.scroll-pane').jScrollPane({showArrows:true, scrollbarWidth: 10});});

I have noticed jquery is taking time in loading and script passes so quickly to other code.

Any suggestion how can I overcome this problem? After commenting scroll pane code rest works fine including jquery code which is at last lines.

Btw: I also tried to put everything in a single but still no luck

Hello again,
I just realized the scrollpane is not working in IE 6 and IE 7. The contents of scrollpane are showing on right side. IE8 shows fine

here is my code
jQuery(function(){jQuery(".scroll-pane").jScrollPane({showArrows:true,scrollbarWidth:10})})

any suggestion?

So sorry, after re-reading the comments above, and looking at the code, I realised I hadn't specified the height's of the images in the listing!

Please ignore the above reqest!
J

Hi Kelvin,

I can successfully implement the scrollbar in single aspx page. But when i used it inside the ajax modalpopupextender i get the error "invalid arguement". Any help would be highly appreciable.

Hi Kelvin,

I'm having an issue getting jscrollpane to reinitialise under a certain condition; namely, I have a series of divs that expand and collapse accordion style, utilizing the slideToggle plugin for jquery; this basically just hides and shows these divs, which could be of any height. These divs are all contained within the scrollpane div; so, when clicking on these expand-collapse divs, the height adjusts, but the scrollpane doesn't show up. How do I reinitialize the jscrollpane when there is no call to the server and the page doesn't refresh? I have reinitialiseonimageload happening when the page loads, but it doesn't work under this condition.

Kyle

Kyle,

I hope this snippet can help you!

Now I encapsulate my accordions in a DL, using the DT for the clickable title and the DD as the information; it just made sense to me! ;-D

So, here is a snippet which I know works as I'm currently using it! This also allows you to pass a hash to the page to enable individual accordions opening on page load! (Credit goes to Remy Sharp [http://remysharp.com/] for the inspiration!)

// if there is a hash on the url, filter the links by the hash prop
var toshow = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';
//Grab the articles into an variable; #news-accordion is a DL tag here;
var containers = $('#news-accordion > dd');

$('#news-accordion dt a.opener').click(function () {

//On click hide everything and then filter through
containers.hide().filter(this.hash).show()

//the .article class is the container with the width,height and overflow:auto set;
.find('.article').show().jScrollPane({
showArrows: true,
scrollbarWidth: 16,
scrollbarMargin: 10,
arrowSize: 16,
dragMaxHeight: 370
});
//You can add specific styles to all open containers with this:
$('#news-accordion dt a.opener').removeClass('selected');
$(this).addClass('selected');
//If the Hash is passed then initiate and open
}).filter(toshow).click();

I hope this helps!

Cheers,
Jon

Sorry, I wrote you an email too, but probably others would like to know this also. Is it possible the give the scrollbar an different height and position that the div it scrolls? I would like to have the scrollbar alsways bottom left of the div I scroll and 150px heigh.

Thanks fpr this great script!
Thomas

Hi,

@Thomas - sorry, that is not possible,

@Luca - I opened it in firefox but I can't see any problems.. Was the problem somehow related to jScrollPane? I can't see any scrollpanes either!

Cheers,

Kelvin :)