Описание:
В этой версии Мини-чат с новым автообновлением для uCoz появилась возможность подгружать сообщения, автообновление теперь каждые 20 секунд, изменён дизайн чата на более симпатичнее и много исправлено мелочей.

Установка:
1.) Настраиваем модуль "Мини-чат" по этому скриншоту:
2.Вид материалов чата заменяем на:

Code

<div class="mch">
<div class="blockGbChat cBlock1">
<div style="float:left">
<a href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('m_text').focus();parent.window.document.getElementById('m_text').value+='[i]$USERNAME$[/i], ';return false;"><b>$USERNAME$</b></a>
</div>
<div style="text-align:right" class="transparency">
<span title="$DATE$" style="color:grey;font-size:9px;">$TIME$</span>
<a href="/index/8-$USER_ID$" target="_blank"><img src="http://webo4ka.ru/Ucoz4/mchat_user-icon.png" align="absmiddle" border="0"></a>
</div>
<div class="hrchat"></div>
$MESSAGE$
</div>
</div>

3.В шаблоне код $CHAT_BOX$ заменяем на:

Code

<?if($USER_LOGGED_IN$)?>
<div id="p_ml" style="display:none;z-index:102;position:absolute;background:white;opacity:0.9;height:270px;width:224px;"><br><br><br><br><br><br><br><br><br><br><center><img src="http://webo4ka.ru/Ucoz4/edit_mchat_mess_loading.gif"></center></div>
<div id="chat_mess" style="overflow:scroll;overflow-x:hidden;height:270px;">Идёт загрузка..<br>Пожалуйста, подождите.</div><hr>
<table border="0" cellpadding="1" cellspacing="1" width="100%"><tr><td width="95%" rowspan="2"><textarea id="m_text" placeholder="Текст Вашего сообщения.." onkeyup="cmlen();mlens();" onfocus="cmlen();mlens();" onblur="$('#mchatBtn').css({'background':''});"></textarea></td><td align="center" valign="top"><div style="font-size:10px;"><b id="m_len" style="color:#bdbdbd;">300</b></div><?ifnot($GROUP_ID$='12' or $GROUP_ID$='255')?><a href="javascript://" onclick="window.open('/mchat/0-1','mchatCtrl','scrollbars=1,width=550,height=550,left=0,top=0');return false;"><img style="margin-top:3px;" id="e_img" src="http://webo4ka.ru/Ucoz4/edit_mchat_mess.png" width="15" height="15"></a><?endif?></td></tr><tr><td align="center" valign="bottom" style="padding-bottom:2px;"><div style="width:30px"><input type="submit" onclick="m_post()" value="OK" class="mchat" id="mchatBtn" style="width:30px;"><img id="p_er" src="/.s/img/icon/er.png" style="display:none;margin-bottom:5px;"><img id="p_ok" src="/.s/img/icon/ok.png" style="display:none;margin-bottom:5px;"><img id="p_mli" src="http://webo4ka.ru/Ucoz4/mpload.gif" style="display:none;margin-bottom:5px;"></div></td></tr></table>
<input type="text" id="cust1" style="display:none;">
<div class="pod_ewe2" onclick="window.location.href='http://webo4ka.ru/';">гуляю на webo4ka.ru</div>
<?else?>
<div class="no_mchat"><b>Доступ закрыт</b><br>Чтобы видеть сообщения, <b><a href="$LOGIN_LINK$" title="Вход">войдите</a></b>.</div>
<?endif?>
<script>
$('#m_text').keydown(function(e){if(e.ctrlKey && e.keyCode == 13){$('#mchatBtn').click();}});
ldmess = function(){$('#p_ml').show();$('#chat_mess').html('<div class="pod_ewe" onclick="ldmess2()">Подгрузить ещё..</div>');$.get('/mchat/', function(data){var mesgs = $('div.mch:lt(20)', data).append();$('div#chat_mess').prepend(mesgs);});setTimeout(function(){$('#p_ml').hide();}, 700);};ldmess();
ldmess2 = function(){$('#p_ml').show();$('#chat_mess').html('');$.get('/mchat/', function(data){var mesgs = $('div.mch', data).append();$('div#chat_mess').prepend(mesgs);});setTimeout(function(){$('#p_ml').hide();}, 700);};
m_post = function(){
if($('#m_text').val().length<10){$('#mchatBtn').hide();$('#p_er').show();setTimeout(function(){$('#p_er').hide();$('#mchatBtn').fadeIn('fast');}, 1500);}
else{$('#mchatBtn').hide();$('#p_ml').show();setTimeout(function(){
$.post('/mchat/', {numa: 0, a: 18, ajax: 1, mcmessage: $('#m_text').val(), custom1: $('#cust1').val()}, function(){$('#p_ml').hide();$('#p_ok').show();$('#m_text').val('');ldmess();setTimeout(function(){$('#p_ok').hide();$('#mchatBtn').fadeIn('fast');}, 1500);});
}, 1000);
}
};
mlens = function(){if($('#m_text').val().length<10){$('#mchatBtn').css({'background':'#fee4e3'});}else{$('#mchatBtn').css({'background':'#e6ffe3'});}};
function cmlen(){var rst = 300-$('#m_text').val().length;if (rst<0){rst=0;$('#m_text').val($('#m_text').val().substr(0,300));}$('#m_len').html(rst);};
setInterval(function(){ldmess()}, 20000);
</script>

4. В CSS:

Code

textarea#mchatMsgF {width:168px !important;}
img#e_img{opacity:0.5;}
img#e_img:hover{opacity:1.0;}
div.pod_ewe{background:#f7f7f7;padding:6px;border:1px solid #ccc;margin-top:4px;}
div.pod_ewe:hover{background:#fff;cursor:pointer;}
div.pod_ewe2{opacity:0.7;background:#f7f7f7 url('http://webo4ka.ru/Ucoz4/1310277969_117893421.png') no-repeat right;padding:6px;border:1px solid #ddd;margin-top:4px;}
div.pod_ewe2:hover{opacity:1.0;background:#fff url('http://webo4ka.ru/Ucoz4/1310277969_117893421.png') no-repeat right;cursor:pointer;}
.blockGbChat{margin:5px 0px;padding:2px 6px;max-width:309px;overflow:hidden;}
.cBlock1{border:1px solid #cfcfcf;background:#f8f8f8;}
.transparency a img{opacity:0.7;filter:alpha(opacity=70);}
.transparency a:hover img{opacity:1.0;filter:alpha(opacity=100);}
.hrchat{height:1px;width:100%;background:white;border-top:1px solid #dddddd;margin:2px;}
input#mchatBtn{background:#f8f8f8;border:1px solid #dddddd;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding:3px;}
input#mchatBtn:hover{background:#fff;border:1px solid #cfcfcf;cursor:pointer;}
input#mchatBtn:focus{border:1px solid #bdbdbd;}
textarea#m_text{resize:none;background:#fbfbfb;border:1px solid #dddddd;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding:3px;}
textarea#m_text:hover{background:#fff;border:1px solid #cfcfcf;-moz-box-shadow:0px 0px 5px #bdbdbd inset;box-shadow:0px 0px 5px #bdbdbd inset;-webkit-box-shadow:0px 0px 5px #bdbdbd inset;}
textarea#m_text:focus{border:1px solid #bdbdbd;-moz-box-shadow:0px 0px 5px #bdbdbd inset;box-shadow:0px 0px 5px #bdbdbd inset;-webkit-box-shadow:0px 0px 5px #bdbdbd inset;}
.no_mchat{margin:4px;padding:4px;border:2px solid #dddddd;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;color:#cc6a6a;}