Проблема инициализации jScrollPane - PullRequest
Новая
       7

Проблема инициализации jScrollPane

2 голосов
/ 17 августа 2011

Я уже задавал этот вопрос на форуме jQuery, но не получил ответа.У меня проблема с инициализацией плагина jScrollPane.Я настроил тестовый сайт, чтобы проиллюстрировать это: http://herrmondl.multimediaart.at/_notwebsite/test/test.html

Нажатие на картинку должно обновить весь левый DIV.Первый раз, когда вы нажимаете на изображение, работает хорошо, но повторение этого процесса приводит к исчезновению раздела «Био».Это определенно из-за неправильной инициализации плагина jScrollPane.Если вы (пере) загрузите сайт и сначала нажмете на Urkel, вы увидите пользовательскую полосу прокрутки.

Итак, вот ошибочный код для вызова событий наведения и щелчка: 

$('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();
});

В основном этот код обрабатывает анимацию наведения и событие щелчка.Как вы можете видеть в коде, он также должен обрабатывать анимацию при отсутствии мыши, которая также, похоже, не работает.

Любая помощь для правильной инициализации будет принята с благодарностью (и если вы сделаете так, чтобы мышка работала)ты тоже будешь моим героем).

Ответы [ 2 ]

1 голос
/ 19 сентября 2011

Я понял это самостоятельно некоторое время назад.Кажется, что мой .html () - метод вызвал проблему.Использование .load () работает просто отлично.Так вот обновленный код 

$(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");



            }

    );
0 голосов
/ 18 августа 2011

Насколько я могу сказать, нет причины инициализировать jScrollPane внутри функции щелчка. Я вынес его за пределы привязки щелчка и просто поместил его вверху под document.ready и немного очистил, и теперь он работает нормально. Вот ссылка, показывающая, как это настроено сейчас: http://jsfiddle.net/WLfGv/

...