Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Поделиться ссылкой

Мы в социальных сетях



- Правила форума -

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: JPG-Net Видео фоторедактор Транслит
Видео-туториалы
Настройка шапки форума
Категории и подфорумы - 1
Создание портала
Модули
Виджеты
Как присваивать награды
Выброс кубиков
Pop-up для входа на форум
Настроение в профиле

Оформление полосы прокрутки

Предыдущая тема Следующая тема Перейти вниз

Решено Оформление полосы прокрутки

Сообщение автор Альберт Вескер в Пт 29 Ноя - 11:52

Для блока задал свойство css "overflow-y: auto;", при заполнении блока появляется стандартная полоса прокрутки, и вот возник вопрос, каким образом её можно оформить по-своему. Например, как здесь - блок "Свойства CSS" слева.
Разумеется, что такие свойства как:
scrollbar-face-color
scrollbar-shadow-color
scrollbar-highlight-color
scrollbar-3dlight-color
scrollbar-track-color и прочие
не подходят.

Альберт Вескер
 
 

Пол : Мужчина
Сообщения : 684
Возраст : 26
Карма : Без предупреждений
Благодарности : 41
Регистрация : 2011-04-03

http://www.re-role.com

Вернуться к началу Перейти вниз

Решено Re: Оформление полосы прокрутки

Сообщение автор Dana Domirani в Пт 29 Ноя - 13:41

Посмотрите тут: http://help.forum2x2.ru/t30599-topic


Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Пол : Женщина
Сообщения : 21911
Возраст : 31
Место обитания : СПб
Карма : Без предупреждений
Благодарности : 8761
Регистрация : 2008-04-18

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Решено Re: Оформление полосы прокрутки

Сообщение автор Альберт Вескер в Пт 29 Ноя - 16:46

Dana Domirani, пример по ссылке подходит только для браузеров гугл хром, т.е. не кроссбраузерный вариант.


Вот вроде нашёл тот самый вариант модификации скроллбара для элемента через jQuery - http://www.xiper.net/collect/js-plugins/ui/jscrollpane2.html - но не соображу, как его прикрутить.

Альберт Вескер
 
 

Пол : Мужчина
Сообщения : 684
Возраст : 26
Карма : Без предупреждений
Благодарности : 41
Регистрация : 2011-04-03

http://www.re-role.com

Вернуться к началу Перейти вниз

Решено Re: Оформление полосы прокрутки

Сообщение автор Dana Domirani в Пт 29 Ноя - 17:25

А Вы пробовали его подключить? На каком этапе возникли проблемы?


Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Пол : Женщина
Сообщения : 21911
Возраст : 31
Место обитания : СПб
Карма : Без предупреждений
Благодарности : 8761
Регистрация : 2008-04-18

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Решено Re: Оформление полосы прокрутки

Сообщение автор Альберт Вескер в Пт 29 Ноя - 18:09

Залил файлы в ПА (библиотеку jquery, jquery.mousewheel.js и jquery.jscrollpane.js).
И вот, собственно, на этом шаге и встрял:
Код:
<script type="text/javascript">
   jQuery(function()
   {
      jQuery('.scroll-pane').jScrollPane();
   });
</script>
То ли в ПА заливать, то ли ставить в шаблон. К тому же .scroll-pane - вместо него указывать id/класс своего блока? + после этого перестали переключаться вкладки контейнера.

Альберт Вескер
 
 

Пол : Мужчина
Сообщения : 684
Возраст : 26
Карма : Без предупреждений
Благодарности : 41
Регистрация : 2011-04-03

http://www.re-role.com

Вернуться к началу Перейти вниз

Решено Re: Оформление полосы прокрутки

Сообщение автор Dana Domirani в Пт 29 Ноя - 19:03

библиотеку jquery — не надо, она уже есть в форуме
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>
как раз в управление JS, только без тегов скрипта, т.е.
Код:
   jQuery(function()
   {
      jQuery('.scroll-pane').jScrollPane();
   });


Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Пол : Женщина
Сообщения : 21911
Возраст : 31
Место обитания : СПб
Карма : Без предупреждений
Благодарности : 8761
Регистрация : 2008-04-18

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Решено Re: Оформление полосы прокрутки

Сообщение автор Альберт Вескер в Пт 29 Ноя - 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 -->
 <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>
В управление ЯваСкриптами загрузил (расположение на всех страницах):
jQuery(function()
      {
         jQuery('.scroll-pane').jScrollPane();
      });
Нужному блоку присвоил класс scroll-pane. И в CSS записал:
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;
}
Всё сохранил и опубликовал. В итоге ничего не работает. Я что-то сделал не так?)

Альберт Вескер
 
 

Пол : Мужчина
Сообщения : 684
Возраст : 26
Карма : Без предупреждений
Благодарности : 41
Регистрация : 2011-04-03

http://www.re-role.com

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения