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


----

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

 Сообщение Блок с вертикальной прокруткой (или скрипт скроллинга) 
#1 

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

Введение

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

По сути вы сможете реализовать блок, сверху которого будет 3 надписи, Вверх - Вниз - Сброс и при наведении мыши на любую из надписей, содержимое блока будет прокручиваться вверх\вниз\придет в исходное положение соответственно.

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

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

Скачиваем и распаковываем из архива единственную папку в корень форума
Вложение :
Комментарий к файлу: EasyScroll - элегантный и удобный скрипт для phpbb3, необходимый для красивого и неповторимого скроллинга содержимого в любых информационных блоках
easyscroll.rar [1.35 KiB]
Скачиваний: 146

Далее открываем файл /styles/ваш стиль/template/overall_header.html и перед тегом </head> вставляем следущий код
<script type="text/javascript" src="easyscroll/easyscroll.js"></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 id="myContent"><!-- 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>
 

Если стиль на основе сабсильвера2, то открываем /styles/ваш стиль/template/posting_body.html и находим
<!-- IF S_SMILIES_ALLOWED -->
      <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>
   <!-- ENDIF -->
 

Заменяем на
<!-- IF S_SMILIES_ALLOWED -->
      <table id="myContent" 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>
   <!-- ENDIF -->
 

Все, скрипт установлен, теперь немного о настройке, в файле /easyscroll/easyscroll.js
Цитата:

/* Названия ваших кнопок */
var nav = ["Прокрутить смайлы вверх", "Прокрутить смайлы вниз", "Сброс прокрутки"];

/* Айди ваших кнопок */
var navId = ["btnUp", "btnDown", "btnReset"];

/* Скорость движения текста в блоке */
var speed = 5;

/* Высота вашего блока */
var height = 200;

Заключение

В заключении хотелось бы отметить, что скроллинг в блоке смайлов это всего лишь пример, этот скрипт можно использовать в любых блоках, где нужна прокрутка. Опять таки к примеру вот код блока в котором будет такая прокрутка
<div id="myContent">содержимое блока</div>
 

Либо подключение к таблице
<table id="myContent"  width="100%" cellspacing="1">
<tr>
<td align="left">
содержимое ячейки
</td>
<td align="center">
содержимое ячейки
</td>
<td align="right">
содержимое ячейки
</td>
</tr>
</table>
 

Успехов :ya_hoo_oo:


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

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

#2 

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

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


чего то я так не хочу :-(-- Хочу как у вас. Как называется мод, чтоб как у вас сделать?


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

#3 

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

Блок с вертикальной прокруткой[версия 2] - вот что у меня)


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


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

  Похожие темы  Автор  Ответов  Просмотров  Последнее сообщение 
Аватар пользователя Блок с вертикальной прокруткой[версия 2]
Блок с вертикальной прокруткой[версия 2] phpbb3 - новый способ реализации вертикального скроллинга в блоках для phpbb3

DeaDRoMeO

128

6818

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

29 ноя 2014, 09:10

DeaDRoMeO

Аватар пользователя Блок соцсети

Олега

17

200

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

28 фев 2017, 17:19

Олега

Аватар пользователя Плавающий блок соц. сети

Олега

2

98

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

26 фев 2017, 13:06

Олега

Аватар пользователя Блок сбоку страницы разделов форума

Милена

3

313

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

12 июл 2016, 05:17

DeaDRoMeO

Аватар пользователя Сворачивающийся блок с запоминанием в куках phpbb3
В данной теме пойдет речь о создании произвольного блока с информацией, с функцией закрытия и запоминания этого состояния в куках бразузера

DeaDRoMeO

26

2706

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

19 фев 2017, 10:43

DeaDRoMeO

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

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

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

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


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