» »

Мини чат по клику выдвижной для uCoz


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

Так он будет по умолчанию:

мини чат по клику появляеться

Кнопка идет ссылкой и даже имеет небольшой эффект прозрачности при наведение. У вам есть шанс ее просто поменять и поставить что то заметнее. Также есть еще по такому формату чат, что можете посмотреть.

Установка:

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

Код
<style>  
.chat_box {display:none;position:fixed;bottom:15px;right:15px;border:1px solid #dddddd;background:#fbfbfb;padding:4px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:2px 2px 3px #9b9b9b;-webkit-box-shadow:2px 2px 3px #9b9b9b;box-shadow:2px 2px 3px #9b9b9b;}  
.chat_box div.close {display:block;position:absolute;right:0;top:0;background:url('http://zornet.ru/SKRIPT/Grazyga/close.png') no-repeat;width:16px;height:16px;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);}  
.chat_box div.close:hover {cursor:pointer;opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}  
   
div.chat_button {display:block;width:36px;height:36px;background:url('http://zornet.ru/SKRIPT/Grazyga/chat.png') no-repeat;position:fixed;bottom:15px;right:15px;opacity:0.5;-moz-opacity:0.8;filter:alpha(opacity=80);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);}  
div.chat_button:hover {cursor:pointer;opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}  
</style>  
<div class="chat_button" onclick="$('.chat_button').fadeOut('fast');$('.chat_box').slideToggle('slow');"></div>  
<div class="chat_box"><div class="close" onclick="$('.chat_box').slideToggle('fast');$('.chat_button').fadeIn('slow');"></div>  
<div id="chatbox">$CHAT_BOX$</div>  
</div>


Здесь хочется добавить, что 2 чата не могут быть на сайте, если у вас в блоке стоит, то этот работать не будет и нужно старый просто убрать и здесь плюс, место освободиться.

Вы спросите какой дизайн там будет?

Тот который у вас в админ панели установлен, в моем случай, взял с этого сайта вид материала, и добавление, который вы найдете здесь, так как залил его. И теперь он просто переместился, если так можно выразиться выдвижной чат.
PS - полностью работает и проверен.
10.03.2016 Просмотров: 460 Комментарий: (9)

Поделиться в социальных сетях

Материал разместил

Комментарий: 8
Maryges
Maryges 10.03.2016 23:261
0
Костен, кинь ссылку формы добавление, думаю быстрее найдешь, не могу найти, тут этих мини чат, вообще много, может и что то подберу, просто если работает, есть мысль как кнопку сделать, что чателись.
Kosten
Kosten 10.03.2016 23:594
0
Maryges, у меня работы валом, как искать, но постараюсь найти если тебе понравилась форма добавление.
Maryges
Maryges 11.03.2016 00:216
0
Костен, если ты скидывал на сайт, просто не могу найти по всяким запросам, просто скинь форму добавление.
tsakonter
tsakonter 10.03.2016 23:392
0
Раньше такой чат на старом сайте стоял, только кнопку сменил, в интернете найти не проблеме, так писали, все также можно сказать, что в блоке он был или закрыт, кому нужно тот откроет, на его место поставил информер.
FeStemBer
FeStemBer 10.03.2016 23:463
0
Вообще думал, что все перешли на мини чат от урааа, хоть здесь нормальный. Что выдвижной, основном ставят, чтоб место освободить, и идет только скрипт, внешний вид, все также делаете, как бы в блоке стоял он.
Kosten
Kosten 11.03.2016 00:025
0
Но не нравиться мне тот чат, который торчит из низ сайта, но этот хот кнопка, по клику появился и он широкий, что можно изображение поставить.
Kosten
Kosten 11.03.2016 00:267
0
Maryges, но ты достанешь) вот держи и мути там у себя, потом что ни будь прикольное напишешь во флуде, шутка.

Форма добавление комментарий как на сайте zornet.ru

Код
<?if(!$CAN_ADD$)?><div align="center"><?if($LOGIN_LINK$)?><a href="$LOGIN_LINK$">Для добавления необходима авторизация</a><?else?>Доступ запрещен<?endif?></div><?else?>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<td width="70%" align="right">
<center><a href="$RELOAD_URI$" title="Обновить"><img alt="" border="0" align="absmiddle" src="http://zornet.ru/Ajaxoskrip/jhIZqgd.png" style="padding-right: 1px;" width="34" height="17"></a>  
<?if($SMILES_URI$)?><a href="$SMILES_URI$" title="Вставить смайл"><img alt="" border="0" align="absmiddle" src="http://zornet.ru/Ajaxoskrip/4kyD8Zt.png" style="padding: 0 1px 0 3px;" width="34" height="17"></a><?endif?>  
<?if($BBCODES_URI$)?><a href="$BBCODES_URI$" title="BB-Коды"><img alt="" border="0" align="absmiddle" src="http://zornet.ru/Ajaxoskrip/faolkYc.png" style="padding-right: 1px;" width="34" height="17"></a><?endif?>  
<?if($MSGCTRL_URI$)?> <a href="$MSGCTRL_URI$" title="Управление сообщениями"><img alt="" border="0" align="absmiddle" src="http://zornet.ru/Ajaxoskrip/m2bspN7.png" style="padding-right: 1px;" width="34" height="17"></a><?endif?></center>
</td></tr></table>
<?if(!$USER_LOGGED_IN$)?>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr><td colspan="2">$FLD_NAME$</td></tr>
<tr><td width="50%">$FLD_EMAIL$</td><td>$FLD_URL$</td></tr>
</table>
<?endif?>

<?if($FLD_CUSTOM1$ || $FLD_CUSTOM2$)?>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr><td width="50%">$FLD_CUSTOM1$</td><td>$FLD_CUSTOM2$</td></tr>
</table>
<?endif?>

<?if($FLD_SECURE$)?>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr><td width="50%">$FLD_SECURE$</td><td align="right">$IMG_SECURE$</td></tr>
</table>
<?endif?>

<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr><td width="95%" rowspan="2">$FLD_MESSAGE$</td>
<td align="center" valign="top"><div style="font-size:10px;">$LENGTH_COUNTER$</div></td>
</tr><tr><td align="center" valign="bottom">$SUBMIT$</td></tr></table>
<?endif?>

<?if($GROUP_ID$=1 or $GROUP_ID$=2 or $GROUP_ID$=251 or $GROUP_ID$=255 )?>  
<script type="text/javascript">$(function(){$('textarea').keyup(function(){var re=/(http)|(www)/;if(this.value.search(re)!=-1){$('#mchatBtn').attr('disabled',true)}else{$('#mchatBtn').removeAttr('disabled')}})});</script>  
<?endif?>
Сопрано
Сопрано 11.03.2016 00:378
0
Но плюс от меня Maryges, также не мог найти, вид материала у меня с авой, но тоже думаю на простой вид сменить.
avatar