How to reinitialise jScrollPane without losing features added in the first initialisation?

Question

I'm having trouble with jScrollPane's reinitialise() method. Whenever I call it, stuff that I implemented in the first initialisation stops working...

In my current code, I'm doing something like this:

$('.scrollable').each(function(){

    var e = $(this),
        parent = e.parent();

    e.jScrollPane({
        // parameters
    });

    var api = e.data('jsp'),
        arrowup = e.find('.jspArrowUp'),
        arrowdw = e.find('.jspArrowDown');

    if ( api.getIsScrollableV() ) {
        e.addClass('scrolled-top');
        parent.addClass('scroll-parent');
    }

    e.scroll(function(){
        var scrbef = api.getContentPositionY(),
            scrmax = api.getContentHeight() - this.clientHeight,
            scraft = scrmax - scrbef,
            dlayup = (scrbef - 220)/100,
            dlaydw = (scraft - 220)/100,
            opacup = dlayup > 1 ? 1 : dlayup < 0 ? 0 : dlayup,
            opacdw = dlaydw > 1 ? 1 : dlaydw < 0 ? 0 : dlaydw;

        if ( scrbef === 0 ) {
            e.addClass('scrolled-top').removeClass('scrolled-bot');
        } else if ( scraft === 0 ) {
            e.addClass('scrolled-bot').removeClass('scrolled-top');
        } else {
            e.removeClass('scrolled-top scrolled-bot');
        }

        arrowup.css('opacity', opacup);
        arrowdw.css('opacity', opacdw);
    });

So far, so good. What that does is:

• initialise jScrollPane on the .scrollable elements
• depending on the content position, add or remove scrolled-top or scrolled-bot classes.
• controls the opacity of the arrows depending on the content's position (there's a lot of padding at the top and bottom, so I only want the arrows to appear when the actual content has reached the border of the screen).

Right after that bit, I have this:

    var throttleTimeout;

    $(window).resize(function(){
        if ( !throttleTimeout ) {
            throttleTimeout = setTimeout( function(){
                    api.reinitialise();

                    throttleTimeout = null;
                }, 500
            );
        }
    });

    $('.deployer').click(function(e){
        api.reinitialise();
    });
});

Now, that is pretty straightforward; the code to reinitialise when the window is resized comes straight from the documentation.

However, as soon as either reinitialise() is called, so after resizing the window or clicking on the .deployer element, the previous code which controlled the arrows' opacity stops working – although, weirdly enough, the scrolled-top and scrolled-bot classes still get added or removed properly.

Does anyone know what might be causing this behaviour and how to fix it?

Cheers.

Answer 1

Found what was happening.

Whenever you reinitialise, basically everything gets resetted, so the elements that were previously stored in arrowup and arrowdw don't exist anymore. Adding

var arrowup = e.find('.jspArrowUp'),
    arrowdw = e.find('.jspArrowDown');

again after each reinitialise() made the trick.