Блок с вертикальной прокруткой (или скрипт скроллинга)
Добавлено: 27 мар 2012, 23:58
Введение
Давненько я не делился прикольными и полезными скриптами, пришло время нарушить эту тенденцию. Сегодня хотелось бы поделиться очень хорошим скриптом скроллинга в блоках. Скрипт достаточно оригинален и легок в установке.
По сути вы сможете реализовать блок, сверху которого будет 3 надписи, Вверх - Вниз - Сброс и при наведении мыши на любую из надписей, содержимое блока будет прокручиваться вверх\вниз\придет в исходное положение соответственно.
Какой толк от этого ? А соль вот в чем - на многих форумах стоит большое количество смайликов и чтобы добраться до нужного зачастую приходится пролистать несколько страниц. А этот скрипт уберет эту проблему, после установки вам потребуется через админку настроить показ всех смайлов на странице ответа и радоваться результатам.
Установка и настройка скрипта
Скачиваем и распаковываем из архива единственную папку в корень форума Далее открываем файл
Код: Выделить всё
<script type="text/javascript" src="easyscroll/easyscroll.js"></script>
Код: Выделить всё
<!-- 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>
Код: Выделить всё
<!-- 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 -->
/* Названия ваших кнопок */
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>