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

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


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

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

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


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

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

Собственная полоса прокрутки страницы

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

Собственная полоса прокрутки страницы

Сообщение автор Альберт Вескер в Пн 14 Апр - 0:21

Доброго времени суток.
Назрел вопрос как заменить стандартную прокрутку страницы браузера на собственную и что бы она работала в большинстве браузеров.

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

Мужчина

Сообщения : 680
Возраст : 26
Регистрация : 2011-04-03
Благодарности : 41

Без предупреждений

http://www.re-role.com

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

Re: Собственная полоса прокрутки страницы

Сообщение автор Dana Domirani в Пн 14 Апр - 10:00

Альберт Вескер, в примере используется плагин nanoScroller: http://jamesflorentino.github.io/nanoScrollerJS/



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


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


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



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

Женщина

Сообщения : 22079
Возраст : 32
Место обитания : СПб
Регистрация : 2008-04-18
Благодарности : 8874

Без предупреждений

http://poltergeist-legacy.com/

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

Re: Собственная полоса прокрутки страницы

Сообщение автор Альберт Вескер в Вт 15 Апр - 18:03

Dana Domirani, несколько не разберусь каким образом это установить. Подскажите, пожалуйста.

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

Мужчина

Сообщения : 680
Возраст : 26
Регистрация : 2011-04-03
Благодарности : 41

Без предупреждений

http://www.re-role.com

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

Re: Собственная полоса прокрутки страницы

Сообщение автор Альберт Вескер в Чт 17 Апр - 22:03

up

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

Мужчина

Сообщения : 680
Возраст : 26
Регистрация : 2011-04-03
Благодарности : 41

Без предупреждений

http://www.re-role.com

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

Re: Собственная полоса прокрутки страницы

Сообщение автор Альберт Вескер в Сб 19 Апр - 17:32

up

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

Мужчина

Сообщения : 680
Возраст : 26
Регистрация : 2011-04-03
Благодарности : 41

Без предупреждений

http://www.re-role.com

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

Re: Собственная полоса прокрутки страницы

Сообщение автор Dana Domirani в Сб 19 Апр - 23:52

Вариант для BB2

1) Скачайте плагин из вложенного здесь файла (в конце этого сообщения). Разархивируйте его, залейте на хостинг, получите прямую ссылку вида

Код:
http://адрес_хостинга/jquery.nanoscroller.js


2) В шаблоне overall_header (Верхняя часть страницы) перед тегом
Код:
</head>
добавьте код добавления плагина
Код:
<script src="http://адрес_хостинга/jquery.nanoscroller.js" type="text/javascript"></script>
Вместо ссылки http://адрес_хостинга/jquery.nanoscroller.js подставьте ссылку на загруженный Вами плагин.



Ниже замените два фрагмента:

Код:
<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>
Вместо ссылки http://адрес_хостинга/jquery.nanoscroller.js подставьте ссылку на загруженный Вами плагин.



Ниже замените два фрагмента:

Код:
<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 шаблоны нередактируемые, для них вариантов предложить не могу.


Вложенные файлы
nanoscroller.zip плагин jquery.nanoscrollerУ вас нет прав скачивать вложенные файлы.(6 Кб) Скачиваний: 12



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


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


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



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

Женщина

Сообщения : 22079
Возраст : 32
Место обитания : СПб
Регистрация : 2008-04-18
Благодарности : 8874

Без предупреждений

http://poltergeist-legacy.com/

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

Re: Собственная полоса прокрутки страницы

Сообщение автор Альберт Вескер в Вс 20 Апр - 19:38

Dana Domirani, спасибо!

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

Мужчина

Сообщения : 680
Возраст : 26
Регистрация : 2011-04-03
Благодарности : 41

Без предупреждений

http://www.re-role.com

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

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


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