Меню с прокруткой jScrollPlane

Just do it =P 15.02.2012 Все вопросы » jQuery 4020

вопрос

Помогите до осмыслить правильность подключение jScrollPlane.

вот я подключил css и сам js скрипт:


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="jScrollPane.css" />

Вот моё меню

Показать / Скрыть текст


<body>
    <div class="scroll-wrap">
        <div class="scroll-pane">
пункт меню
пункт меню
пункт меню
пункт меню
        </div>
    </div>
</body>

Что я не так сделал? у меня открывается простое меню без прокрутки, каким оно должно быть.

Как я нашёл ответ на данный вопрос:
1. Забил в Яндекс строку поиска
2. Посмотрел первую попавшуюся статью
3. Посмотрел различия в коде, увидел что много чего не хватает у вас...


    <script type="text/javascript">
        jQuery(function() {
            jQuery('.scroll-pane').jScrollPane({scrollbarWidth:18, showArrows:true});
        });
    </script>

5 комментариев

Эксперт

1925

nowheremany - 2012-02-1516 февраля 2012 12:39 - #3786

Странно но автора не отобразило ))
ведь перенес с раздела стол заказов

Благодарность принимаю тут Связь

Админ

3457

ПафНутиЙ - 2012-02-1516 февраля 2012 19:26 - #3800

я ж говорил, не переносите из стола заказов, при добавлении в стол заказов не вносятся данные в БД, которые вносятся при добавлении вопроса....

Каков вопрос - таков и ответ. Просто помните об этом.

Юзер

Just do it =P - 2012-02-1516 февраля 2012 17:26 - #3792

nowheremany,
автор я, помогите разобраться всё подключил и даже то что забыл. Но к сожалению до сих пор нет ни каких положительных результатов.
Может необходимо что-то ещё прописать в стилях чтобы текст обрезался в определенном месте, т.к у меня если очень много пунктов меню то вылазит за блок до бесконечности. Может из-за этого прокрутка не появляется?
Если нужно могу скинуть свой шаблон.
Если что меня можно найти в skype: Alexdusha

Юзер

Just do it =P - 2012-02-1516 февраля 2012 17:33 - #3793

Всё я смог устранить проблему добавив в css:


.scroll-pane {
width: 700px; /* Ширина видимой области*/
height: 275px; /* Высота видимой области*/
overflow: auto; /* Если отключены скрипты это правило позволит отобразить обычный скролл */
}

Спасибо тем кто помогал мне.

Юзер

Just do it =P - 2012-02-1516 февраля 2012 18:28 - #3796

и ещё есть вопрос по дизайну данного скрипта. я нашёл стиль для него в котором каждый параметр расписан и его можно менять под себя.

Показать / Скрыть текст


.scroll-pane {
    width: 190px; /* Ширина видимой области*/
    height: 410px; /* Высота видимой области*/
    overflow: auto; /* Если отключены скрипты это правило позволит отобразить обычный скролл */
}

.jScrollPaneContainer {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Трек - полоса по которой бегает ползунок */
.jScrollPaneTrack {
    position: absolute;
    cursor: pointer;
    right: 0;
    top: 0;
    height: 100%;
    background: url({../images/scrollTrak.gif) repeat-y; /* задаем фоновую картинку или просто цвет фона */
}

/* Средняя часть ползунка (резиновая, т.к. ползунок меняет высоту в зависимости от количества содержимого) */
.jScrollPaneDrag {
    position: absolute;
    background: url(../images/scrollDrag.gif) repeat-y; /* задаем фоновую картинку или просто цвет фона */
    cursor: pointer;
    overflow: hidden;
    left:1px;
}
/* верхушка ползунка (можно задать height:0, если ползунок не имеет выраженной верхушки) */
.jScrollPaneDragTop {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background: url(../images/scrollDragTop.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */
    height:3px; /* высота верхушки */
}
/* низ ползунка (можно задать height:0, если ползунок не имеет выраженного низа) */
.jScrollPaneDragBottom {
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background: url(../images/scrollDragBot.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */
    height:3px; /* высота низа */
}
/* стрелка вверх (правило можно исключить, если скролл по дизайну без стрелок) */
a.jScrollArrowUp {
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    text-indent: -2000px;
    overflow: hidden;
    height: 18px; /* высота стрелки (ширина определяется шириной скролла при инициализации скрипта) */
    background: url(../images/arrow_up.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */
}
/* стрелка ввниз (правило можно исключить, если скролл по дизайну без стрелок)*/
a.jScrollArrowDown {
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    text-indent: -2000px;
    overflow: hidden;
    height: 18px; /* высота стрелки (ширина определяется шириной скролла при инициализации скрипта) */
    background: url(../images/arrow_down.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */
}

но не могу создать блок с такими же параметрами для отображения на сайте. Помогите пожалуйста додумать уже)
вот мое меню на данный момент:

Показать / Скрыть текст

<div class="scrollBox">
    <div id="pane" class="scroll-pane">
        пункт меню
        пункт меню
        пункт меню
        пункт меню
        пункт меню
        пункт меню
        пункт меню
        пункт меню
    </div>
</div>

[related-news]

Меню с прокруткой jScrollPlane

5 комментариев

Похожие вопросы