Пользовательский интерфейс jquery: страница ajax + содержимое слайдера (часть 2)

Question

Вслед за этим постом я сделал ранее.Я узнал ответы на все вопросы.Но у меня все еще есть небольшой твик, который я не могу понять правильно -

Это процентное значение, которое мне нужно, чтобы передать его в слайдер -

var percentage = Math.round(offset.left / (scrollContent.width() - scrollPane.width()) * 100);
scrollbar.slider("value",percentage);

Этот процент должен увеличиваться каждый раз, когдаЯ перемещаю ручку ползунка вправо.Это нормально, когда я загружаю первые две страницы Ajax (процент увеличивается), но после этих первых двух процент начинает падать до отрицательных значений.

Как найти правильный процент?

Вы можете попробовать это здесь и посмотреть, что я имею в виду выше.

Ниже приведен весь код jquery:

$(document).ready(function(){

    loadSlide ();

});


function loadSlide ()
{
    //scrollpane parts
    scrollPane = $('#scroll-pane'); // scroll-pane
    scrollContent = $('#scroll-content'); // scroll-content

    //alert(scrollContent.width());

  scrollbar = $("#content-slider").slider({
    min: 0,
    create: loadContent,
    animate: true,
    change: handleSliderChange,
    slide: handleSliderSlide
  });
}

function handleSliderChange(event, ui)
{

  var maxScroll = scrollContent.width() - scrollPane.width();
  scrollPane.animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);

}

function handleSliderSlide(event, ui)
{

  var maxScroll = scrollContent.width() - scrollPane.width();
  scrollPane.attr({scrollLeft: ui.value * (maxScroll / 100) });

}

function loadContent(event, ui) 
{
    $('.load-content').click(function(){

        var path = $(this).attr('href');
        var parent = $(this).parents('.content-item');

        parent.after('<div class="wrapper"></div>');

        var target = $('.wrapper').css({float:'left'});
        target.load(path, function(){

            var width_loaded_content = target.width();
            var offset = target.offset();
            var position = target.position();
            scrollContent.css({width: (scrollContent.width() + width_loaded_content) + 'px'});

            var percentage = Math.round(offset.left / (scrollContent.width() - scrollPane.width()) * 100);
            alert(percentage);
            scrollbar.slider("value",percentage);

            exitContent (target);
        });

        return false;
    });
}

function exitContent (target)
{
    $('.exit-content').click(function(){
        scrollbar.slider("value",0);
        scrollContent.css({width: (1500) + 'px'});
        target.remove();
        return false;
    });
}

Другая проблема в том, почему это иногдаоповещения дважды после загрузки страниц AJAX, но иногда это не так?это всегда должно насторожить один раз.

Есть идеи?