Question

I already asked this question in the jQuery forum but I didn’t get an answer. I’ve got a problem with the initialization of the jScrollPane plugin. I set up a test site to illustrate it: http://herrmondl.multimediaart.at/_notwebsite/test/test.html

Clicking on a picture should update the entire left DIV. The first time you click on a picture works well but repeating this process makes the “Bio” section disappear. This is definitely because of a wrong initialization of the jScrollPane plugin.
If you (re)load the website and click on Urkel at first you’ll see the custom scrollbar.

So here’s the buggy code for calling the hover and click events:

$('div.artistImg a').hover(function() {

    var currArtist = $(this).parent().find('div.artistName'),
        clicked = $(currArtist).hasClass('artistActive');

    if (!clicked) {
        $(currArtist).stop().css('top', '30px').show().animate({
            "top": "0px"
        }, "fast");
    }
}, function() {
    // if(!$clicked) {
    //       $(currArtist).stop()
    //           .css({
    //               'display': 'block',
    //               'top':'0px'
    //               })
    //           .animate({"top": "30px"}, "fast");    
}).bind('click', function(e) {
    $('div.artistActive').removeClass('artistActive');
    $(this).parent().find('div.artistName').addClass('artistActive');

    $('.artistWrap .artistDates').css('display', 'none');
    e.preventDefault();
    $("div.firstDates").hide().html($(this.hash).html()).fadeIn('slow');


    var api = $('.artistBio').jScrollPane({
        showArrows: false,
        verticalGutter: '1',
    });
    api.reinitialise();
});

Basically this code handles a hover animation and the click event. As you can see in the code it should also handle the mouse-out animation which also seems not to work.

Any help to get the initialization right would be appreciated (and if you get the mouse-out stuff working too you will be my hero).

Answer 1

I figured it out on my own some time ago. It seems that my .html()-method caused the problem. Using .load() works just fine. So here is the updated code

$(function() {

    $('.artistBio').jScrollPane().data('jsp');

    $('div.artistImg a').hover(function(){

        ...

        },function(){

            ...

        }).bind('click',
            function(e)
            {
                $('div.artistActive').removeClass('artistActive');
                $(this).parent().find('div.artistName').addClass('artistActive');

                $('.artistWrap .artistDates').css('display', 'none');
                e.preventDefault(); 



                // retrieve the current file's url as .load() seems to need it
                var file = location.pathname.substr(location.pathname.lastIndexOf("/")+1,location.pathname.length);

                $("div.firstDates").hide().load(file + " " + this.hash, 
                        function()
                        {
                            $('.artistBio').jScrollPane().data('jsp').reinitialise();
                        }).fadeIn("slow");



            }

    );