Форум
Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» Как поменять вид нумерации страниц тем?автор Goodmonday Апрель 18th 2024, 21:04
» Форум не корректно загружается.
автор anna4842 Апрель 12th 2024, 23:48
» Не корректное отображение картинок
автор Красноперова О.А. Апрель 12th 2024, 15:49
» Ошибка на форуме: Could not obtain topic posts informations
автор fatalone Апрель 9th 2024, 13:43
» Переход с 2x2forum.ru на 2x2forum.com
автор Luz Март 28th 2024, 12:13
» Проблема с метатегом Description
автор VeraLV Март 18th 2024, 15:31
» 1 марта будет запрет на ВПН, это отразится на работе платформы?
автор Svet007 Март 14th 2024, 11:43
» нужен скрипт сумма просмотров тем в разделе
автор лексей2222 Март 5th 2024, 07:37
» Новое: Откройте для себя функцию "Подписка на пользователей"
автор лексей2222 Март 1st 2024, 17:26
» 301 редирект
автор Dana Domirani Февраль 25th 2024, 18:28
Оформление полосы прокрутки
Участников: 2
Бесплатный форум: форум поддержки :: Взаимопомощь и Поддержка :: Оформление вашего форума :: [Архив] Оформление форума
Страница 1 из 1
Оформление полосы прокрутки
автор Альберт Вескер Ноябрь 29th 2013, 11:52
Для блока задал свойство css "overflow-y: auto;", при заполнении блока появляется стандартная полоса прокрутки, и вот возник вопрос, каким образом её можно оформить по-своему. Например, как здесь - блок "Свойства CSS" слева.
Разумеется, что такие свойства как:
Разумеется, что такие свойства как:
не подходят.scrollbar-face-color
scrollbar-shadow-color
scrollbar-highlight-color
scrollbar-3dlight-color
scrollbar-track-color и прочие
Альберт Вескер-
-
Сообщения : 683
Возраст : 33
Регистрация : 2011-04-03
Благодарности : 41
-
Re: Оформление полосы прокрутки
автор Dana Domirani Ноябрь 29th 2013, 13:41
Посмотрите тут: https://help.forum2x2.ru/t30599-topic
| Где находится CSS? Па > Оформление > Цвета > Каскадная таблица стилей CSS Где искать основные шаблоны? ПА > Оформление > Шаблоны > Общие настройки Где находится раздел для подключения скриптов ПА > Модули > Управление кодами Javascript |
Dana Domirani- Администратор
-
Сообщения : 22994
Возраст : 39
Регистрация : 2008-04-18
Благодарности : 9286
-
Re: Оформление полосы прокрутки
автор Альберт Вескер Ноябрь 29th 2013, 16:46
Dana Domirani, пример по ссылке подходит только для браузеров гугл хром, т.е. не кроссбраузерный вариант.
Вот вроде нашёл тот самый вариант модификации скроллбара для элемента через jQuery - http://www.xiper.net/collect/js-plugins/ui/jscrollpane2.html - но не соображу, как его прикрутить.
Вот вроде нашёл тот самый вариант модификации скроллбара для элемента через jQuery - http://www.xiper.net/collect/js-plugins/ui/jscrollpane2.html - но не соображу, как его прикрутить.
Альберт Вескер-
-
Сообщения : 683
Возраст : 33
Регистрация : 2011-04-03
Благодарности : 41
-
Re: Оформление полосы прокрутки
автор Dana Domirani Ноябрь 29th 2013, 17:25
А Вы пробовали его подключить? На каком этапе возникли проблемы?
| Где находится CSS? Па > Оформление > Цвета > Каскадная таблица стилей CSS Где искать основные шаблоны? ПА > Оформление > Шаблоны > Общие настройки Где находится раздел для подключения скриптов ПА > Модули > Управление кодами Javascript |
Dana Domirani- Администратор
-
Сообщения : 22994
Возраст : 39
Регистрация : 2008-04-18
Благодарности : 9286
-
Re: Оформление полосы прокрутки
автор Альберт Вескер Ноябрь 29th 2013, 18:09
Залил файлы в ПА (библиотеку jquery, jquery.mousewheel.js и jquery.jscrollpane.js).
И вот, собственно, на этом шаге и встрял:
И вот, собственно, на этом шаге и встрял:
- Код:
<script type="text/javascript">
jQuery(function()
{
jQuery('.scroll-pane').jScrollPane();
});
</script>
Альберт Вескер-
-
Сообщения : 683
Возраст : 33
Регистрация : 2011-04-03
Благодарности : 41
-
Re: Оформление полосы прокрутки
автор Dana Domirani Ноябрь 29th 2013, 19:03
библиотеку jquery — не надо, она уже есть в форуме
jquery.mousewheel.js и jquery.jscrollpane.js нельзя заливать в управление JS, только на сторонний хостинг и добавлять через <head>
Т.е. вот именно это ставить перед </head>, только с нормальными ссылками:
jquery.mousewheel.js и jquery.jscrollpane.js нельзя заливать в управление JS, только на сторонний хостинг и добавлять через <head>
Т.е. вот именно это ставить перед </head>, только с нормальными ссылками:
- Код:
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.js"></script>
- Код:
<script type="text/javascript">
jQuery(function()
{
jQuery('.scroll-pane').jScrollPane();
});
</script>
- Код:
jQuery(function()
{
jQuery('.scroll-pane').jScrollPane();
});
| Где находится CSS? Па > Оформление > Цвета > Каскадная таблица стилей CSS Где искать основные шаблоны? ПА > Оформление > Шаблоны > Общие настройки Где находится раздел для подключения скриптов ПА > Модули > Управление кодами Javascript |
Dana Domirani- Администратор
-
Сообщения : 22994
Возраст : 39
Регистрация : 2008-04-18
Благодарности : 9286
-
Re: Оформление полосы прокрутки
автор Альберт Вескер Ноябрь 29th 2013, 20:26
Итак. Залил два файла:
jquery.mousewheel.js - http://testline.rusff.ru/files/0012/2d/b0/13623.js
jquery.jscrollpane.js - http://testline.rusff.ru/files/0012/2d/b0/64802.js
В оверал хеад непосредственно перед хеад вставил:
jquery.mousewheel.js - http://testline.rusff.ru/files/0012/2d/b0/13623.js
jquery.jscrollpane.js - http://testline.rusff.ru/files/0012/2d/b0/64802.js
В оверал хеад непосредственно перед хеад вставил:
В управление ЯваСкриптами загрузил (расположение на всех страницах):<!-- jquery.mousewheel -->
<script type="text/javascript" src="http://testline.rusff.ru/files/0012/2d/b0/13623.js"></script>
<!-- jquery.jscrollpane -->
<script type="text/javascript" src="http://testline.rusff.ru/files/0012/2d/b0/64802.js"></script>
Нужному блоку присвоил класс scroll-pane. И в CSS записал:jQuery(function()
{
jQuery('.scroll-pane').jScrollPane();
});
- CSS:
- Код:
/*
* CSS Styles that are needed by jScrollPane for it to operate correctly.
*
* Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
* may not operate correctly without them.
*/
.jspContainer
{
overflow: hidden;
position: relative;
}
.jspPane
{
position: absolute;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 100%;
background: red;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: red;
}
.jspVerticalBar *,
.jspHorizontalBar *
{
margin: 0;
padding: 0;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: #dde;
position: relative;
}
.jspDrag
{
background: #bbd;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspArrow
{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspVerticalBar .jspArrow
{
height: 16px;
}
.jspHorizontalBar .jspArrow
{
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus
{
outline: none;
}
.jspCorner
{
background: #eeeef4;
float: left;
height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
}
Альберт Вескер-
-
Сообщения : 683
Возраст : 33
Регистрация : 2011-04-03
Благодарности : 41
-
Бесплатный форум: форум поддержки :: Взаимопомощь и Поддержка :: Оформление вашего форума :: [Архив] Оформление форума
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения
Facebook
ВКонтакте
