Мини-чат с автообновлением


Мини-чат с автообновлением

1070
8.6 из 10
Проголосовало: 3






В нем есть:
1) Автообновление каждые 20 сек.
2) Возможность подгружать сообщения.
3) Красивое оформление ))

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;}


Автор: hi7eMh1Gh
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://multi-rip.ru/
  • Всего комментариев: 1

DJ_FORWARD
0
DJ_FORWARD написал: Написано 14 Июля 2011 в 21:37
Комментарий №1
dry

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 12
    Гостей: 10
    Пользователей: 2
    0
    Сегодня были
    Топ пользователей: