Блок с вертикальной прокруткой (или скрипт скроллинга)

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

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

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

Блок с вертикальной прокруткой (или скрипт скроллинга)

Сообщение DeaDRoMeO »

Введение

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

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

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

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

Скачиваем и распаковываем из архива единственную папку в корень форума
easyscroll.rar
EasyScroll - элегантный и удобный скрипт для phpbb3, необходимый для красивого и неповторимого скроллинга содержимого в любых информационных блоках
(1.35 КБ) 162 скачивания
Далее открываем файл /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, по ЛС не отвечаю !!!
#1
Аватара пользователя
Лена
Завсегдатай Форума
Завсегдатай Форума
Сообщения: 966
Стаж: 11 лет 5 месяцев
Контактная информация:

Блок с вертикальной прокруткой (или скрипт скроллинга)

Сообщение Лена »

это так должно выглядеть?


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

Блок с вертикальной прокруткой (или скрипт скроллинга)

Сообщение DeaDRoMeO »

Блок с вертикальной прокруткой[версия 2] - вот что у меня)
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#3
Ответить
  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение