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

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

Модераторы: Vl@d1m1r, Lorem Ipsum, Atlas

Правила форума
----
Ответить
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

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

Сообщение DeaDRoMeO »

Введение

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

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

Скачиваем архив и распаковываем папку js в корень форума
js.zip
Блок с вертикальной прокруткой[версия 2] phpbb3 - новый способ реализации вертикального скроллинга в блоках для phpbb3
(9.4 КБ) 222 скачивания
Далее открываем файл /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, по ЛС не отвечаю !!!
#1
Аватара пользователя
mixail
Свой на все 100
Свой на все 100
Сообщения: 693
Стаж: 12 лет 3 месяца
Контактная информация:

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

Сообщение mixail »

Вроде все установил правильно, а ничего не работает.... :-(--
#2
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

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

Сообщение DeaDRoMeO »

Кэш чистили? Библиотеку подключали ? файлы лежат там где надо ?
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#3
Аватара пользователя
mixail
Свой на все 100
Свой на все 100
Сообщения: 693
Стаж: 12 лет 3 месяца
Контактная информация:

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

Сообщение mixail »

Кеш чистил обязательно и не один раз...
А библиотеку не знаю как подключать...
А папку js в корень... именно папку с файлами или файлы из папки в корень.....
DeaDRoMeO писал(а):файлы лежат там где надо ?
Если редактируемые фалы /styles/ваш стиль/template/overall_header.html и /styles/ваш стиль/template/posting_editor.html, то все правильно сделал, там вроде ошибиться то негде.... :-(--
#4
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

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

Сообщение DeaDRoMeO »

Папку 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, по ЛС не отвечаю !!!
#5
Аватара пользователя
mixail
Свой на все 100
Свой на все 100
Сообщения: 693
Стаж: 12 лет 3 месяца
Контактная информация:

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

Сообщение mixail »

Это наверняка не здесь собака зарыта, что то другое....
Может на хостинге, что нибудь включать надо или что не знаю...
Просто я даже к вам захожу на форум, когда по какой нибудь теме на форуме нажимаю ответить, то там смайлики, все как положено показывает блок со скроллингом.... и двигаешь ползунок все работает...
А когда я к вам на портал или на форум захожу, то в чате нету у меня не каких скроллингов, даже и у вас я ни чего не вижу...
А тем более у меня, даже при установки этого анонса, ни чего не показывается...
Не знаю чудеса, да и только... не хочет, что то меняться.... или по стилю не подходят редакция файлов.... :-(--
#6
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

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

Сообщение DeaDRoMeO »

хмммм поглядите на вкладке Стили, не хранится ли случайно ваш шаблон в базе данных и из хедера удалите такой кусок кода

Код: Выделить всё

<script type="text/javascript">
   jQuery(function()
   {
      jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true});
   });
</script>
и вставьте его в posting_editor.html после самой первой строки в коде ( первой строкой идет вроде подключение хедера)
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#7
Аватара пользователя
mixail
Свой на все 100
Свой на все 100
Сообщения: 693
Стаж: 12 лет 3 месяца
Контактная информация:

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

Сообщение mixail »

Вот здесь надо искать, что ли.....styles/prosilver/template/overall_header.html .... :ny_tik:
#8
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

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

Сообщение DeaDRoMeO »

Ага, именно там)
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#9
Аватара пользователя
mixail
Свой на все 100
Свой на все 100
Сообщения: 693
Стаж: 12 лет 3 месяца
Контактная информация:

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

Сообщение mixail »

А, что там именно в этом файле должен быть этот кусок кода который надо убрать, а как он там оказался то, а если его там нету.... :-(--
Я имею в виду вот этот....

Код: Выделить всё

<script type="text/javascript">
   jQuery(function()
   {
      jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true});
   });
</script>
#10
Аватара пользователя
mixail
Свой на все 100
Свой на все 100
Сообщения: 693
Стаж: 12 лет 3 месяца
Контактная информация:

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

Сообщение mixail »

Вроде все посмотрел в этом файле визуально... такого скрипта не видно... :du_ma_et:
Последний раз редактировалось mixail 04 апр 2012, 14:39, всего редактировалось 1 раз.
#11
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

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

Сообщение DeaDRoMeO »

Это как ? если его нет то как вы скрипт, описываемый в этой теме ставили ???
Вообщем прикрепляйте в RAR-архиве к своему сообщению эти 2 файла, которые нужно редактировать согласно первому посту темы, я погляжу и отредактирую их :co_ol:
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#12
Аватара пользователя
mixail
Свой на все 100
Свой на все 100
Сообщения: 693
Стаж: 12 лет 3 месяца
Контактная информация:

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

Сообщение mixail »

Все понял... у меня не получалось вчера установить и я потом все на место вернул, но у меня сохранились те файлы которые были отредактированы... я сейчас вам их скину....
#13
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

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

Сообщение DeaDRoMeO »

Да можете и чистые файлы скинуть :-ok-:
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#14
Аватара пользователя
mixail
Свой на все 100
Свой на все 100
Сообщения: 693
Стаж: 12 лет 3 месяца
Контактная информация:

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

Сообщение mixail »

вот zip папка
AВложения Удалены

#15
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

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

Сообщение DeaDRoMeO »

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

На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#16
Аватара пользователя
mixail
Свой на все 100
Свой на все 100
Сообщения: 693
Стаж: 12 лет 3 месяца
Контактная информация:

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

Сообщение mixail »

Спасибо!
Сейчас попробую закину... потом проверю и напишу... :-00):
#17
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

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

Сообщение DeaDRoMeO »

Будем ждать :-00):
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#18
Аватара пользователя
mixail
Свой на все 100
Свой на все 100
Сообщения: 693
Стаж: 12 лет 3 месяца
Контактная информация:

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

Сообщение mixail »

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



#19
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

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

Сообщение DeaDRoMeO »

По умолчанию высота блока 400 пикселей, у вас на скриншоте мало смайлов выставлено в форму ответа, попробуйте добавить еще как минимум 50 смайлов на страницу ответа (все это в админке в настройках смайликов) и потом глядите :-ok-:
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#20
Ответить
  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение