Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» ВПНавтор Danny_Marcelo Вчера в 07:47
» Пропала вкладка "Обработка пользователей"
автор Svet007 Ноябрь 23rd 2024, 07:39
» Как найти администратора?
автор PushPayer Ноябрь 21st 2024, 00:58
» Не корректное отображение картинок
автор VENEFICA. Ноябрь 15th 2024, 14:46
» Не меняется название форума
автор Aviator Ноябрь 14th 2024, 15:40
» Дублируется ссылка на форум в боковом меню
автор Чистый сталкер Октябрь 26th 2024, 21:13
» совет админам
автор лексей2222 Октябрь 23rd 2024, 05:45
» Проблема с гугл из-за Hitskin
автор Вултур Октябрь 21st 2024, 15:43
» [решено]Редактирвоание темы
автор AlexDarkTech Октябрь 13th 2024, 08:14
» Пропали иконки редактирования - HEEELP
автор Archaea Сентябрь 23rd 2024, 18:11
Собственная полоса прокрутки страницы
Участников: 2
Бесплатный форум: форум поддержки :: Взаимопомощь и Поддержка :: Оформление вашего форума :: [Архив] Оформление форума
Страница 1 из 1
Собственная полоса прокрутки страницы
Доброго времени суток.
Назрел вопрос как заменить стандартную прокрутку страницы браузера на собственную и что бы она работала в большинстве браузеров.
Назрел вопрос как заменить стандартную прокрутку страницы браузера на собственную и что бы она работала в большинстве браузеров.
Re: Собственная полоса прокрутки страницы
Альберт Вескер, в примере используется плагин nanoScroller: http://jamesflorentino.github.io/nanoScrollerJS/
Где находится CSS? Па > Оформление > Цвета > Каскадная таблица стилей CSS Где искать основные шаблоны? ПА > Оформление > Шаблоны > Общие настройки Где находится раздел для подключения скриптов ПА > Модули > Управление кодами Javascript |
Re: Собственная полоса прокрутки страницы
Dana Domirani, несколько не разберусь каким образом это установить. Подскажите, пожалуйста.
Re: Собственная полоса прокрутки страницы
Вариант для BB2
1) Скачайте плагин из вложенного здесь файла (в конце этого сообщения). Разархивируйте его, залейте на хостинг, получите прямую ссылку вида
2) В шаблоне overall_header (Верхняя часть страницы) перед тегом
Ниже замените два фрагмента:
и
на
Сохраните, опубликуйте (!) шаблон.
3) В ПА > Модули > Управление кодами JS укажите Активировать управление кодами JS : да
Создайте новый файл и заполните следующим образом:
Название: любое, например, новый скроллер
Расположение: на всех страницах
Код:
Сохраните.
4) Добавьте в CSS настройки и измените цвета / закругления по вкусу:
Вариант для Pun
1) первый пункт такой же
2) В шаблоне overall_header (Верхняя часть страницы) перед тегом
Ниже замените два фрагмента:
и
Сохраните, опубликуйте (!) шаблон.
3) Третий пункт такой же
4) Четвертый пункт такой же
У форумов BB3 и IPB шаблоны нередактируемые, для них вариантов предложить не могу.
1) Скачайте плагин из вложенного здесь файла (в конце этого сообщения). Разархивируйте его, залейте на хостинг, получите прямую ссылку вида
- Код:
http://адрес_хостинга/jquery.nanoscroller.js
2) В шаблоне overall_header (Верхняя часть страницы) перед тегом
- Код:
</head>
- Код:
<script src="http://адрес_хостинга/jquery.nanoscroller.js" type="text/javascript"></script>
Ниже замените два фрагмента:
- Код:
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
- Код:
<div class="nano"><div class="nano-content"><table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
и
- Код:
</table>
</body>
</html>
<!-- END html_validation -->
на
- Код:
</table></div></div>
</body>
</html>
<!-- END html_validation -->
Сохраните, опубликуйте (!) шаблон.
3) В ПА > Модули > Управление кодами JS укажите Активировать управление кодами JS : да
Создайте новый файл и заполните следующим образом:
Название: любое, например, новый скроллер
Расположение: на всех страницах
Код:
- Код:
$(function(){
$(".nano").nanoScroller();
});
Сохраните.
4) Добавьте в CSS настройки и измените цвета / закругления по вкусу:
- Код:
/* настройки прокрутки nanoScroller */
body {
margin: 0 !important;
padding: 0 !important;
}
.nano > .nano-content {
position: absolute;
overflow: scroll;
overflow-x: hidden !important;
top: 0;
right: 0 !important;
bottom: 0;
left: 0;
margin: 0 !important;
padding: 0 !important;
}
.nano > .nano-content:focus {
outline: thin dotted;
}
.nano > .nano-content::-webkit-scrollbar {
visibility: hidden;
}
.has-scrollbar > .nano-content::-webkit-scrollbar {
visibility: visible;
}
/* полоса прокрутки */
.nano > .nano-pane {
background: rgba(0,0,0,.25); /* цвет фона */
position: absolute;
width: 10px; /* ширина */
right: 0;
top: 0;
bottom: 0;
visibility: hidden\9; /* Target only IE7 and IE8 with this hack */
opacity: .01; /* по-умолчанию прокрутку не видно */
-webkit-transition: .2s;
-moz-transition: .2s;
-o-transition: .2s;
transition: .2s;
-moz-border-radius: 5px; /* закругленные уголки */
-webkit-border-radius: 5px; /* закругленные уголки */
border-radius: 5px; /* закругленные уголки */
}
/* бегунок на полосе прокрутки */
.nano > .nano-pane > .nano-slider {
background: #444; /* цвет бегунка */
background: rgba(0,0,0,.5); /* цвет бегунка */
position: relative;
margin: 0 1px;
-moz-border-radius: 3px; /* закругленные уголки */
-webkit-border-radius: 3px; /* закругленные уголки */
border-radius: 3px; /* закругленные уголки */
}
/* при наведении полоса прокрутки появляется */
.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed {
visibility: visible\9; /* Target only IE7 and IE8 with this hack */
opacity: 0.99;
}
Вариант для Pun
1) первый пункт такой же
2) В шаблоне overall_header (Верхняя часть страницы) перед тегом
- Код:
</head>
- Код:
<script src="http://адрес_хостинга/jquery.nanoscroller.js" type="text/javascript"></script>
Ниже замените два фрагмента:
- Код:
<div class="minwidth_IE">
- Код:
<div class="nano"><div class="nano-content"><div class="minwidth_IE">
и
- Код:
</div>
</div>
</div>
</div>
</body>
</html>
<!-- END html_validation -->
- Код:
</div></div></div>
</div>
</div>
</div>
</body>
</html>
<!-- END html_validation -->
Сохраните, опубликуйте (!) шаблон.
3) Третий пункт такой же
4) Четвертый пункт такой же
У форумов BB3 и IPB шаблоны нередактируемые, для них вариантов предложить не могу.
Где находится CSS? Па > Оформление > Цвета > Каскадная таблица стилей CSS Где искать основные шаблоны? ПА > Оформление > Шаблоны > Общие настройки Где находится раздел для подключения скриптов ПА > Модули > Управление кодами Javascript |
Похожие темы
» полоса прокрутки страницы
» Полоса прокрутки
» Полоса прокрутки
» Полоса прокрутки на странице
» Полоса прокрутки для текста
» Полоса прокрутки
» Полоса прокрутки
» Полоса прокрутки на странице
» Полоса прокрутки для текста
Бесплатный форум: форум поддержки :: Взаимопомощь и Поддержка :: Оформление вашего форума :: [Архив] Оформление форума
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения