Скроллинг на jsУдобная реализация скроллинга по вертикали. Может кому и пригодится.
Демо версия:
ДемоСкачать демо себе:
Скачать из файлового архива сайтаПодключение к вашей странице:
папку
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>:
Код: Выделить всё
<div class="scrollBox">
<div id="pane" class="scroll-pane">
ваш код
</div></div>
:
В файле
/js/jscrollpane.css находятся все необходимые настройки вида, а вот этот кусок
Код: Выделить всё
.scroll-pane {
width: 250px; /* Ширина видимой области*/
height: 400px; /* Высота видимой области*/
overflow: auto; /* Если отключены скрипты это правило позволит отобразить обычный скролл */ }задаёт область скроллинга.
Этот скрипт можно применить, например, для прокрутки смайликов при создании темы в phpbb3...
если кому интересно:
скрытый текст
Выглядеть будет примерно так
Установка:
Скачать папку
Скачать из файлового архива сайта , распаковать, взять оттуда
папку js и загрузить в корень сайта (где файл config.php).
После этого необходимо прописать подключение скрипта и отредактировать файлы форума:
Открыть
/styles/ваш стиль/template/overall_header.htmlНайти
Вставить перед найденным
Код: Выделить всё
<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> :
Открыть
/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>После чего почистите кэш и всё готово.
а можно обойтись и вообще без скрипта. только средствами сss:
в стандартном варианте заменить вывод смайликов
Код: Выделить всё
<!-- 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 -->
на
Код: Выделить всё
<style>
.modern::-webkit-scrollbar-button {background-image:url('');background-repeat:no-repeat;width:5px;height:0px}
.modern::-webkit-scrollbar-track {background-color:#F0FFFF}
.modern::-webkit-scrollbar-thumb {-webkit-border-radius: 5px;border-radius: 5px;background-color:#6dc0c8;}
.modern::-webkit-scrollbar-thumb:hover{background-color:#56999f;}
.modern::-webkit-resizer{background-image:url('');background-repeat:no-repeat;width:4px;height:0px}
.modern::-webkit-scrollbar{width: 2px;}
</style>
<div style="height:300px;width:200px;overflow-x:hidden;overflow-y:scroll;white-space:normal;" class="modern">
<!-- 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 -->
</div>
так же очистить кэш и всё.
