0

Even after my jquery code was kindly cleaned up by sunn0 the scrollpane was not reinitialising properly when the screen grew bigger. finally solved it today and turns out it is how i ordered by css/html

I had ...

    <div class=”scroll-pane horizontal-only”>
    <div id=”content-holder” class=”widthforeachpage”>
    <div class=”content-holder”>1</div>
    <div class=”content-holder”>2</div>
    <div class=”content-holder”>3</div>
    <div class=”content-holder”>4</div>
    </div><!--end content holder-->
     </div><!--end scroll-pane-->

but once I changed the order to below it works perfectly!

    <div id=”content-holder” class=”scroll-pane horizontal-only”>
     <div id=”widthforeachpage”>
     <div class=”content-holder”>1</div>
    <div class=”content-holder”>2</div>
    <div class=”content-holder”>3</div>
    <div class=”content-holder”>4</div>
    </div><!--end widthforeachpage-->
     </div><!--end content holder-->

ps the div "widthforeachpage" is because the scrollpane width is different on each of the my pages that the scrollpane features.

kas
  • 73
  • 2
  • 14
  • Have you tried setting autoReinitialise to true? http://jscrollpane.kelvinluck.com/settings.html – sunn0 May 01 '12 at 01:42
  • Just added it in and amended my code for you to see but it hasn't worked – kas May 01 '12 at 01:58

1 Answers1

0

Try:

$('.scroll-pane').each(function(){
    $this = $(this);
    $this.jScrollPane({
        showArrows: false,
        autoReinitialise: true,
        animateScroll: true,
        horizontalDragMinWidth: 90,
        horizontalDragMaxWidth: 90
    });
    var api = $this.data('jsp');
    var throttleTimeout;
    $(window).bind( 'resize', function() {
        if ($.browser.msie) {
            if (!throttleTimeout) {
                throttleTimeout = setTimeout(
                    function(){
                        api.reinitialise();
                        throttleTimeout = null;
                    }, 
                    50
                );
            }
        } else {
            api.reinitialise();
        }
    });
});
sunn0
  • 2,918
  • 1
  • 24
  • 25
  • Thanks for help - I tried with and without the window bind part and they both fail. Looking at the console.log I get two results - without bind the error that gets pulled up api undefined for the script for the red text expanders, With the bind it pulls up an api undefined for } else {api.reinitialise();}. Unfortunately I don't know what to do with that information! – kas May 03 '12 at 00:03
  • Thanks @sunn0 the code is definitely neater than what I started with! I have tried with and without the bind with your new code and also stripped out any other scripts on that page and it still breaks when going from a small window to a bigger window. Not really sure what to do next! – kas May 04 '12 at 01:01