Как я могу изящно перейти от карусели Jquery к списку прокрутки CSS - PullRequest
Новая
       32

Как я могу изящно перейти от карусели Jquery к списку прокрутки CSS

0 голосов
/ 28 февраля 2011

обновление

Я добавил эти две строки в сценарий ниже: я запустил отладчик, и при выполнении, похоже, удаляются атрибуты, но на веб-странице продолжает отображаться полоса прокрутки. 

       $("#newsticker-demo").removeAttr("overflow-y");
        $("#newsticker-demo").removeAttr("height");

<script type="text/javascript" language="javascript">
    $(function () {

        $(".newsticker-jcarousellite").jCarouselLite({
            vertical: true,
            visible: 1,
            auto: 1,
            speed: 8000,
            circular: true
        });
        $("#newsticker-demo").removeAttr("overflow-y");
        $("#newsticker-demo").removeAttr("height");
    });
</script>

- В IE8 сейчас моя проблема номер один -

Здравствуйте, На нашей домашней странице есть карусель с вертикальной прокруткой. То, что я хочу сделать, это изящно не использовать только CSS, если JavaScript отключен. Таким образом, в результате получается текст с вертикальной полосой прокрутки, который пользователь может щелкнуть и перетащить для перемещения по списку. Подобно тому, что вы видите в элементе textarea, в котором слишком много данных, чтобы отображать его сразу.

ссылка на домашнюю страницу. http://beta.sc -pa.com / дом / pasite-home.asp

Как только это будет сделано.

1 Ответ

1 голос
/ 28 февраля 2011

Я бы начал с решения, которое работает без savascript, а затем применил бы вашу карусель прокрутки, манипулируя DOM, если это необходимо.Основная концепция проста: контейнер фиксированной высоты с overflow-y: auto

<style>
#foo {
    width: 100px;
    height: 150px;
    overflow-y: scroll;
}
#foo.carouselled {
    overflow: hidden;
}
</style>

<script>
$(function() {
    $('#foo').jCarouselLite({
        vertical: true,
        visible: 1,
        auto: 1,
        speed: 8000,
        circular: true
    }).addClass('carouselled');
});
</script>

<div id="foo">
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
</div>

См. пример .

Стили являются значениями CSS, а не присваиваются непосредственно элементуДля управления стилями с помощью jQuery используйте функцию css().

...