Search code examples
jqueryjscrollpaneslidetogglejquery-jscrollpane

Jquery Jscrollpane not reinitialising properly - bottom part truncated with slideToggle

I have created a mockup of the error:

Example

Please ignore the beauty of this page! If you scroll down to the bottom result: "28. Diamond House" and click on "More Details", the hidden tab structure appears giving more details about the venue.

You will notice that the bottom of this tab is chopped off.

If you then try to click "More Details" followed by "Hide Details" to the venue about it ("27. Old Rectory"), you will notice a massive gap at the bottom of this scroll pane.

I would have thought that api.reinitalise() would do the trick. Have spent 2 full days on try to resolve this issue but have been hitting brick wall after brick wall.

I would be very grateful if someone can take a look at tell me what I am doing wrong.

Thanks!

Solution

  • First you need to wait for page load as you have images in there. If you don't do that, jscrollpane will not have access to the true original height of the div.

    Then use the auto-reinit option in jScrollPane. The problem with manually using api. reinitialize, is that you must call it after the animation has occurred, which can be less than reliable and can appear as an odd behavior.

    http://jsfiddle.net/zqEph/

    UPDATE

    Here it is with api.reinitalise() http://jsfiddle.net/zqEph/1/