Полезная информация


----

Начать новую тему Ответить на тему
АвторСообщение

 Сообщение Блок с вертикальной прокруткой[версия 2] 
#1 

Аватар пользователя

Введение

В я рассматривал блок со скроллингом, основанным на наведении курсора мыши на текст и содержимое блока начинало прокручиваться. Теперь же я хочу представить более простую, но не менее элегантную версию решения проблемы отображения всех смайлов на странице ответа (Блок со смайлам - это пример, можно сделать блок со скроллингом с любым содержимым). Пример реализации можете поглядеть у нас на форуме, в форме ответа - блок смайлов.

Установка и настройка скрипта

Скачиваем архив и распаковываем папку js в корень форума
Вложение :
Комментарий к файлу: Блок с вертикальной прокруткой[версия 2] phpbb3 - новый способ реализации вертикального скроллинга в блоках для phpbb3
js.zip [9.4 KiB]
Скачиваний: 207

Далее открываем файл /styles/ваш стиль/template/overall_header.html и перед тегом </head> вставляем следущий код
<link type="text/css" rel="stylesheet" href="js/jscrollpane.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  type="text/javascript"></script>
   <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
   <script type="text/javascript" src="js/jscrollpane.js"></script>
<script type="text/javascript">
   jQuery(function()
   {
      jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true});
   });
</script>
 

Если у вас уже установлена библиотека JQuery, то удаляем из кода строку
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  type="text/javascript"></script>
 


Если стиль на основе просильвера, то открываем /styles/ваш стиль/template/posting_editor.html и находим
<!-- IF S_SMILIES_ALLOWED and .smiley -->
         <strong>{L_SMILIES}</strong><br />
         <!-- BEGIN smiley -->
            <a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
         <!-- END smiley -->
      <!-- ENDIF -->
      <!-- IF S_SHOW_SMILEY_LINK and S_SMILIES_ALLOWED-->
         <br /><a href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>
      <!-- ENDIF -->
 

И заменяем его на
<div class="scrollBox">
       <div id="pane" class="scroll-pane">
<!-- IF S_SMILIES_ALLOWED and .smiley -->
         <strong>{L_SMILIES}</strong><br />
         <!-- BEGIN smiley -->
            <a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
         <!-- END smiley -->
      <!-- ENDIF -->
      <!-- IF S_SHOW_SMILEY_LINK and S_SMILIES_ALLOWED-->
         <br /><a href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>
      <!-- ENDIF -->   </div></div>   
 

Если стиль на основе сабсильвера2, то открываем /styles/ваш стиль/template/posting_body.html и находим
      <table  width="100%" cellspacing="5" cellpadding="0" border="0" align="center">
      <tr>
         <td class="gensmall" align="center"><b>{L_SMILIES}</b></td>
      </tr>
      <tr>
         <td align="center">
            <!-- BEGIN smiley -->
               <a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;" style="line-height: 20px;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" hspace="2" vspace="2" /></a>
            <!-- END smiley -->
         </td>
      </tr>

      <!-- IF S_SHOW_SMILEY_LINK -->
         <tr>
            <td align="center"><a class="nav" href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a></td>
         </tr>
      <!-- ENDIF -->

      </table>
 

Заменяем его на
<div class="scrollBox">
       <div id="pane" class="scroll-pane">
      <table  width="100%" cellspacing="5" cellpadding="0" border="0" align="center">
      <tr>
         <td class="gensmall" align="center"><b>{L_SMILIES}</b></td>
      </tr>
      <tr>
         <td align="center">
            <!-- BEGIN smiley -->
               <a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;" style="line-height: 20px;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" hspace="2" vspace="2" /></a>
            <!-- END smiley -->
         </td>
      </tr>

      <!-- IF S_SHOW_SMILEY_LINK -->
         <tr>
            <td align="center"><a class="nav" href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a></td>
         </tr>
      <!-- ENDIF -->

      </table></div></div>
 

Скрипт установлен, не забывайте чистить кеш. Немного о внешнем виде нашего блока. В файле /js/jscrollpane.css находятся все необходимые настройки вида, а вот этот кусок
.scroll-pane {
       width: 250px; /* Ширина видимой области*/
    height: 400px; /* Высота видимой области*/   
   overflow: auto; /* Если отключены скрипты это правило позволит отобразить обычный скролл */   }
 

Задает размеры видимой области блока. Впринципе и все, удачи :co_ol:


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!

Теги темы
Блок с вертикальной прокруткой[версия 2] phpbb3, Блок с вертикальной прокруткой (или скрипт скроллинга) phpbb3, смайлики в блоке скроллинга
          Вернуться наверх  
 

#2 

Аватар пользователя

Вроде все установил правильно, а ничего не работает.... :-(--


          Вернуться наверх  
 

#3 

Аватар пользователя

Кэш чистили? Библиотеку подключали ? файлы лежат там где надо ?


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 

#4 

Аватар пользователя

Кеш чистил обязательно и не один раз...
А библиотеку не знаю как подключать...
А папку js в корень... именно папку с файлами или файлы из папки в корень.....
DeaDRoMeO писал(а):

файлы лежат там где надо ?

Если редактируемые фалы /styles/ваш стиль/template/overall_header.html и /styles/ваш стиль/template/posting_editor.html, то все правильно сделал, там вроде ошибиться то негде.... :-(--


          Вернуться наверх  
 

#5 

Аватар пользователя

Папку js в корень форума :hi_hi_hi: и в хедер вставить
<link type="text/css" rel="stylesheet" href="js/jscrollpane.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  type="text/javascript"></script>
   <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
   <script type="text/javascript" src="js/jscrollpane.js"></script>
<script type="text/javascript">
   jQuery(function()
   {
      jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true});
   });
</script>
 

Строка
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  type="text/javascript"></script>
 

И есть подключение библиотеки


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 

#6 

Аватар пользователя

Это наверняка не здесь собака зарыта, что то другое....
Может на хостинге, что нибудь включать надо или что не знаю...
Просто я даже к вам захожу на форум, когда по какой нибудь теме на форуме нажимаю ответить, то там смайлики, все как положено показывает блок со скроллингом.... и двигаешь ползунок все работает...
А когда я к вам на портал или на форум захожу, то в чате нету у меня не каких скроллингов, даже и у вас я ни чего не вижу...
А тем более у меня, даже при установки этого анонса, ни чего не показывается...
Не знаю чудеса, да и только... не хочет, что то меняться.... или по стилю не подходят редакция файлов.... :-(--


          Вернуться наверх  
 

#7 

Аватар пользователя

хмммм поглядите на вкладке Стили, не хранится ли случайно ваш шаблон в базе данных и из хедера удалите такой кусок кода
<script type="text/javascript">
   jQuery(function()
   {
      jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true});
   });
</script>
 

и вставьте его в posting_editor.html после самой первой строки в коде ( первой строкой идет вроде подключение хедера)


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 

#8 

Аватар пользователя

Вот здесь надо искать, что ли.....styles/prosilver/template/overall_header.html .... :ny_tik:


          Вернуться наверх  
 

#9 

Аватар пользователя

Ага, именно там)


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 


Аватар пользователя

А, что там именно в этом файле должен быть этот кусок кода который надо убрать, а как он там оказался то, а если его там нету.... :-(--
Я имею в виду вот этот....
<script type="text/javascript">
   jQuery(function()
   {
      jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true});
   });
</script>
 


          Вернуться наверх  
 


Аватар пользователя

Вроде все посмотрел в этом файле визуально... такого скрипта не видно... :du_ma_et:



Информация о редактировании
Последний раз редактировалось mixail 04 апр 2012, 14:39, всего редактировалось 1 раз.
          Вернуться наверх  
 


Аватар пользователя

Это как ? если его нет то как вы скрипт, описываемый в этой теме ставили ???
Вообщем прикрепляйте в RAR-архиве к своему сообщению эти 2 файла, которые нужно редактировать согласно первому посту темы, я погляжу и отредактирую их :co_ol:


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 


Аватар пользователя

Все понял... у меня не получалось вчера установить и я потом все на место вернул, но у меня сохранились те файлы которые были отредактированы... я сейчас вам их скину....


          Вернуться наверх  
 


Аватар пользователя

Да можете и чистые файлы скинуть :-ok-:


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 


Аватар пользователя

вот zip папка

A Вложения Удалены



          Вернуться наверх  
 


Аватар пользователя

Все отредактировал согласно инструкции, если папка js помещена в корень форума, то после очистки кеша все должно работать в форме обычного ответа в теме, а так же при написании ЛС :-ok-:

A Вложения удалены



_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 


Аватар пользователя

Спасибо!
Сейчас попробую закину... потом проверю и напишу... :-00):


          Вернуться наверх  
 


Аватар пользователя

Будем ждать :-00):


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 


Аватар пользователя

Все сделал, но не чего не получилось....
Вот скриншоты отправлю вам...
Пожалуйста Зарегистрируйтесь чтобы увидеть ссылку



Пожалуйста Зарегистрируйтесь чтобы увидеть ссылку


          Вернуться наверх  
 


Аватар пользователя

По умолчанию высота блока 400 пикселей, у вас на скриншоте мало смайлов выставлено в форму ответа, попробуйте добавить еще как минимум 50 смайлов на страницу ответа (все это в админке в настройках смайликов) и потом глядите :-ok-:


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 
 
Начать новую тему Ответить на тему


Дополнительные возможности

  Похожие темы  Автор  Ответов  Просмотров  Последнее сообщение 
Аватар пользователя Блок с вертикальной прокруткой (или скрипт скроллинга)
EasyScroll - элегантный и удобный скрипт для phpbb3, необходимый для красивого и неповторимого скроллинга содержимого в любых информационных блоках

DeaDRoMeO

2

2351

Аватар пользователя

27 ноя 2012, 19:47

DeaDRoMeO

Аватар пользователя Мобильная версия
На нашем форуме была установлена мобильная версия, собственно об этом и тема

DeaDRoMeO

8

879

Аватар пользователя

01 мар 2012, 22:18

DeaDRoMeO

Аватар пользователя 'Topiclist FX' Версия 1.0.2

222

5

392

Аватар пользователя

14 фев 2015, 15:16

dqdmitry

Аватар пользователя Мобильная версия phpbb3
Мобильная версия phpbb3 - отличный мод для phpbb3, позволяющий добавить мобильную версию на форум

DeaDRoMeO

368

14741

Аватар пользователя

17 июл 2017, 22:40

madam-ka

Аватар пользователя Вывод последних активных тем (компактная версия)

ursego

15

2132

Аватар пользователя

07 мар 2017, 13:00

DeaDRoMeO

Оставить свой комментарий

Поделиться темой с помощью

Ссылки на тему

Прямая ссылка:
BB-код для форумов, сайтов, блогов:
HTML ссылка:
 


cron

Самая неформальная поддержка phpBB :P