Изначально чат делался для "Живого блога" или как он щас называется "Faceclub"!
По просьбе
Master'a я решил добавить его на webo4k'у.
Вся фишка заключается в его простоте... Ну и нескольких функциях, например сворачивание и разворачивание с запоминанием и пр.
Ну начнем установку:
1. Этот код в любое место на сайте между
<body> и
</body>:
Code
<?if($USER_LOGGED_IN$)?><link type="text/css" rel="StyleSheet" href="http://webo4ka.ru/Ucoz6/mchat_ucoz_fbchat.css" />
<script type="text/javascript" src="http://webo4ka.ru/Ucoz6/jquery.mousewhee_mchatl.js"></script>
<script type="text/javascript" src="http://webo4ka.ru/Ucoz6/jquery.jscrollpane_mchat.js"></script>
<script type="text/javascript">
jQuery(function() {jQuery('#wrappermch').jScrollPane({hideFocus:true});})
$('head').append('<link rel="stylesheet" type="text/css" href="http://webo4ka.ru/Ucoz6/jquery.jscrollpane_mchat.css" />');
</script>
<div class="chat_over">
<div id="bottom_chat" onclick="hide_chat()">Свернуть</div><div id="top_chat" onclick="show_chat()">Развернуть</div>
<div id="cht" onclick="show_chat()"><div class="ngd"><div id="wrappermch" class="scroll-pane"><div id="scroller" class="comm"></div></div></div>
<style type="text/css">#scroller img {max-width: 100%} .hus$USER_ID$ {display:none}</style>
<div class="chtt">$CHAT_BOX$</div></div>
<div id="c_one_clon">0</div><div id="c_tell"></div>
</div>
<script type="text/javascript" >
function otbet(xt) {$('#mchatMsgF').val(''+xt+', ');$('#mchatMsgF').focus()}
function opnsml() {$('.ch_sml').slideToggle(200)}
function smiles(tx) {
$('#mchatMsgF').val($('#mchatMsgF').val()+' '+tx+' ')
$('#mchatMsgF').focus()
$('.ch_sml').slideToggle(200)
}
function show_chat() {
$('.chat_over').animate({bottom:'0px'},200)
$('#top_chat').fadeOut(200,function(){$('#bottom_chat').fadeIn(200)})
setCookie('chat', '1', 10, "/")}
function hide_chat() {
$('.chat_over').animate({bottom:'-285px'},200)
$('#bottom_chat').fadeOut(200,function(){$('#top_chat').fadeIn(200)})
setCookie('chat', '0', 10, "/")}
function show_profile(nmm) {
document.location.href='/index/8-'+nmm
}
function messages() {
$.get('/mchat/', function(dt){
setTimeout(function(){$('#c_one_clon').html($('#c_one', dt).html())},2100)
$('#scroller').html($('div.msg', dt).after());
setTimeout(function(){$('#wrappermch').fadeIn(200);jQuery('#wrappermch').jScrollPane()},200)});
$('#mchatC1F').val('<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://webo4ka.ru/Ucoz6/noavatar_mchat.gif<?endif?>')
setTimeout(function(){messages()},20000)
}
messages()
chtcc = getCookie('chat')
if(chtcc == '1') {$('.chat_over').css('bottom', '20px');$('#top_chat').hide();$('#bottom_chat').show()} </script> <?endif?>
он получился длинноватым, его можно сократить запихнув в js, но нет на это времени...
2.В вид материалов мини-чата:
Code
<div class="msg">
<div class="sb$PARITY$">
<table cellspacing="0" cellpadding="0" width="180">
<tr>
<td valign="top" width="36"><div class="av">
<a href="$PROFILE_URL$"><img src="$CUSTOM1$" alt="$USERNAME$" /></a></div></td>
<td valign="top"><div class="us"><div style="width:150px;overflow:hidden"<?if($NUMBER$='1')?> id="c_one"<?endif?>>$MESSAGE$</div>
</td>
</tr>
</table>
<hr></div>
</div>
3.И в форму добавления сообщения:
Code
<?if(!$USER_LOGGED_IN$)?>
<?else?>
<input type="hidden" name="custom1" class="mchat" id="mchatC1F" value="/images/noavatar.gif" />
<div align="left"><input type="text" name="mcmessage" class="mchat" id="mchatMsgF" maxlength="500" value="" /></div>
<input type="submit" onclick="messages();setTimeout(function(){messages()},500)" value="Отправить" class="mchat2" id="mchatBtn" />
<input style="display:none;" id="mchatAjax" type="button" value="Отправить" class="mchat2" disabled />
<?endif?>