Автоматически изменять размер пользовательской горизонтальной полосы прокрутки/ползунка?

Я работаю над сайтом, который прокручивается горизонтально. Я очень мало знаю о jQuery и прототипе, и я заставил этот скрипт слайдера работать как полоса прокрутки страницы. Когда размер окна уменьшается, размер пользовательского горизонтального ползунка/полосы прокрутки не изменяется до ширины области просмотра.

У меня есть файлы страницы и js здесь http://keanetix.co.cc/scrollpage/

Попробуйте изменить размер браузера, и вы заметите пользовательскую полосу прокрутки, расширяющуюся вправо. Настраиваемая полоса прокрутки не помещается в окне просмотра, если только вы не обновите страницу при изменении ее размера.

Может ли кто-нибудь помочь мне с этим? Спасибо.

Это код на странице HTML:

        <script type="text/javascript" language="javascript">
    // <![CDATA[

        // horizontal slider control
        var slider2 = new Control.Slider('handle', 'track', {
            onSlide: function(v) { scrollHorizontal(v, $('scrollable'), slider2);  },
            onChange: function(v) { scrollHorizontal(v, $('scrollable'), slider2); }
        });



        // scroll the element horizontally based on its width and the slider maximum value
        function scrollHorizontal(value, element, slider) {
            element.scrollLeft = Math.round(value/slider.maximum*(element.scrollWidth-element.offsetWidth));
        }

        // disable horizontal scrolling if text doesn't overflow the div
        if ($('scrollable').scrollWidth <= $('scrollable').offsetWidth) {
            slider2.setDisabled();
            $('track').hide();
        }

    // ]]>
    </script>

slider jquery autoresize
person Community    schedule 15.06.2009    source источник

Ответы (1)


arrow_upward
1
arrow_downward

РЕДАКТИРОВАНИЕ: кажется, что необходим перерасчет размера страницы. И, похоже, это нужно сделать с слайдером прототипа. Сам я им не пользовался, поэтому не могу сказать, что делать в этом случае. В плагине может быть метод, который сделает это за вас...

У меня не получилось открыть вашу страницу, может перегрузка от ТАК пользователей? :п

Но похоже, что вам нужно изменить размер элемента, который содержит вашу пользовательскую полосу прокрутки, всякий раз, когда размер окна изменяется:

window.onresize = resizePage;

Затем напишите свою функцию resizePage, чтобы вычислить новый размер и изменить его соответствующим образом.

В качестве примечания, вы можете ограничить функцию изменения размера, чтобы не получать слишком много вызовов.

function throttle(method, context) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function () {
        method.call(context);
    }, 50);
}

Затем используйте это следующим образом:

window.onresize = function () {
    throttle(resizeFrame);
};

Это означает, что вы будете ждать, пока пользователь не "завершит" изменение размера окна браузера, прежде чем вызывать функцию изменения размера.

person peirix    schedule 15.06.2009
comment
Кажется, я не могу заставить это работать. Я разместил код js, встроенный в html-страницу, в своем первом сообщении. - person ; 15.06.2009
comment
Я думал о повторной инициализации сценария slider.js при изменении размера окна, поэтому диапазон ползунка будет основываться на ширине области просмотра. Код, отвечающий за работу слайдера, я включил в свой первый пост. Может ли кто-нибудь помочь мне с кодом для повторной инициализации ползунка? - person ; 17.06.2009