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

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

Собственная полоса прокрутки страницы Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

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

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

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

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

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

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами 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

Перейти вниз

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

Сообщение автор Альберт Вескер Апрель 14th 2014, 00:21

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

Мужчина

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

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

http://www.re-role.com

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

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

Сообщение автор Dana Domirani Апрель 14th 2014, 10:00

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


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

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


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


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


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

Женщина

Сообщения : 22996
Возраст : 39
Регистрация : 2008-04-18
Благодарности : 9286

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

http://poltergeist-legacy.com/

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

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

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

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

Мужчина

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

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

http://www.re-role.com

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

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

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

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

Мужчина

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

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

http://www.re-role.com

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

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

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

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

Мужчина

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

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

http://www.re-role.com

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

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

Сообщение автор Dana Domirani Апрель 19th 2014, 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 подставьте ссылку на загруженный Вами плагин.

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

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

Код:
<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">

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

и

Код:
</table>
</body>
</html>
<!-- END html_validation -->

на

Код:
</table></div></div>
</body>
</html>
<!-- END html_validation -->

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

Сохраните, опубликуйте (!) шаблон.

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 подставьте ссылку на загруженный Вами плагин.

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

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

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




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

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


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


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


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

Женщина

Сообщения : 22996
Возраст : 39
Регистрация : 2008-04-18
Благодарности : 9286

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

http://poltergeist-legacy.com/

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

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

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

Dana Domirani, спасибо!
Альберт Вескер
Альберт Вескер
 

Мужчина

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

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

http://www.re-role.com

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

Вернуться к началу

- Похожие темы

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