Hello - Vitebsk

Введение

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

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

Скачиваем архив и распаковываем папку 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; /* Если отключены скрипты это правило позволит отобразить обычный скролл */	}

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

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

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

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

DeaDRoMeO писал(а):файлы лежат там где надо ?

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

Папку js в корень форума

и в хедер вставить

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

<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>

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

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

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

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

<script type="text/javascript">
   jQuery(function()
   {
      jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true});
   });
</script>

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

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

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

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

Я имею в виду вот этот....

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

<script type="text/javascript">
   jQuery(function()
   {
      jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true});
   });
</script>

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

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

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

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

вот zip папка

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

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

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

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

Будем ждать

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

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

Hello - Vitebsk

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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