Мини-чат для uCoz от Урааа

Мини-чат для uCoz от Урааа

02012-08-171848460Денис Абдуллин

2015. Появилась новая версия мини-чата от Урааа.

2014. Представляем новую версию чата. Здесь представлен старый.

Удобный и практичный мини-чат для uCoz от Урааа. Свой скроллинг в мини-чате, сворачивание и красивый вид – все это характеризует чат. Вообще, вид напоминает окно переписки ВКонтакте, так, в целом, и есть. Это вполне удобный вид, округленная прозрачная темная обводка, а содержимое, как и полагается, на белом фоне. Как только сообщение написано, оно сразу же отображается в мини-чате. Не нужно обновлять страницу, ведь сообщения обновляются автоматически. Есть определенный таймер на обновления.

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

Установка

Активируйте Мини-чат. В настройках включите дополнительные поля.

Вид материалов мини-чата

Code
<div class="msg">
<div class="sb$PARITY$">
<table cellspacing="0" cellpadding="0" width="100%">
  <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 class="pdvr"><span class="hus<?substr($PROFILE_URL$, strrpos($PROFILE_URL$,"('")+2, strrpos($PROFILE_URL$,"')")-strrpos($PROFILE_URL$,"('")-2)?>"><a href="javascript:otbet('$USERNAME$')" class="otbv">Ответить</a> |</span> <span title="$DATE$">$TIME$</span></div><a href="$PROFILE_URL$">$USERNAME$</a></div>
<div style="width:234px;overflow:hidden"<?if($NUMBER$='1')?> id="c_one"<?endif?>>$MESSAGE$</div>
</td>
</tr>
</table>
</div>
</div>

Форма добавления сообщений

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?>

Вставьте следующий код в нижнюю часть сайта:

Code
<style type="text/css">
.dsnn {display:none}
#c_one_clon, #c_tell {position:absolute;top:-1500px}
.chat_over {position:fixed;padding:5px;padding-top:0;z-index:9999;bottom:-212px;right:20px;text-align:center;background:rgba(0,0,0,0.6);
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px}

*:focus {outline: none}
#bottom_chat {display:none;padding:5px;color:#FFFFFF;cursor: s-resize}
#top_chat {padding:5px;color:#FFFFFF;cursor: n-resize}
.ngd {
  cursor:default;
  background:#FFFFFF;
  padding:5px;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
}
.clkg {width:288px;
padding:5px;padding-bottom:6px;border:1px solid #EAEAEA;
background:#EAEAEA;
color:#000;
text-align:left;
border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;}
#wrapper .comm {margin-top:0;margin-left:0px;}
.sb1, .sb2 {margin-bottom:10px}
.cs2 {margin-top:3px;color:#E32F17;font-size:10px}
.cs1 {margin-top:3px;color:#2B2B2B;font-size:10px}
.chtt iframe {display:none}
.mchat {width:250px}
.chtt {margin-top:5px}
#mchatMsgF {
margin:0;
width:288px;
padding:5px;border:1px solid #FFFFFF;
background:#FFFFFF;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
}  
#mchatBtn {position:absolute;top:-1200px}
#mchatAjax {background:#646464;position:absolute;right:-200px}

.otbv, .otbv:hover {color:#6A6A6A}

.sound_on {margin-top:9px;margin-left:252px;width:19px;height:19px;background:url('/smiles/sound_on.gif');position:absolute;cursor:pointer}
.sound_off {margin-top:9px;margin-left:252px;width:19px;height:19px;background:url('/smiles/sound_off.gif');display:none;position:absolute;cursor:pointer}

#wrapper {
  background:#FFFFFF;
  width: 290px;
  height: 200px;
  overflow: auto;
}

#scroller {
  text-align:left;
  width:270px;
  padding:0;
}
.pdvr {float:right}
.comm {margin-left:6px;margin-top:10px}
.comm .us {color:#646464;font-size:10px;margin-bottom:1px}
.comm .av {margin-right:10px;width:26px;height:26px;overflow:hidden;background:#666666}
.comm .av div {position:absolute;width:26px;height:26px;overflow:hidden;background:url('/images/sprite.png') -8px -384px}
.comm .av img {width:26px}
.cerr {float:right;padding:7px;padding-right:20px}

</style>
<script type="text/javascript" src="http://yraaa.ru/images/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://yraaa.ru/images/jquery.jscrollpane.js"></script>

<script type="text/javascript">
jQuery(function() {jQuery('#wrapper').jScrollPane({hideFocus:true});})
$('head').append('<link rel="stylesheet" type="text/css" href="http://yraaa.ru/images/jquery.jscrollpane.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="wrapper" 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"><?if(!$USER_LOGGED_IN$)?><div class="clkg">Необходима авторизация</div><?else?>$CHAT_BOX$<?endif?></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:'20px'},200)
$('#top_chat').fadeOut(200,function(){$('#bottom_chat').fadeIn(200)})
setCookie('chat', '1', 10, "/")}
function hide_chat() {
$('.chat_over').animate({bottom:'-212px'},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(){$('#wrapper').fadeIn(200);jQuery('#wrapper').jScrollPane()},200)});
$('#mchatC1F').val('<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://yraaa.ru/images/noavatar.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>

Ограниченная версия

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

http://ваш_сайт/mchat/0-1 - страница удаления и редактирования сообщений в чате.


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (59)
Валерий Администратор 2014-04-06 в 16:43 / МатериалСпам
Да чат просто не доработан
1
Sensys 2014-02-12 в 00:20 / МатериалСпам
как-то криво ставиться на юкоз: http://clan-fckl.clan.su/
1
Danil Noskov 2014-01-09 в 21:46 / МатериалСпам
как сделать ее таких же размеров как и на "Урааа" а то у меня на пол экрана и мешает
0
Islam 2014-01-02 в 20:56 / МатериалСпам
Здравствуйте хотел сказать "Спасибо" за скрипт очень понравился, но у меня скроллинг не работает!(как у вас на сайте, как мне это исправить??)
0
Денис Абдуллин 2013-11-21 в 17:27 / МатериалСпам
alesha6655, нет
1
ilhom 2013-11-17 в 00:59 / МатериалСпам
исправьте пожалуйста а то у меня нет смайлик и звук как у вас обновите код спасибо заранее
0
Eduard Hakobyan 2013-10-19 в 23:20 / МатериалСпам
Спасибо!
0
Денис Абдуллин 2013-10-19 в 23:18 / МатериалСпам
edohak, добавил соответствующую информацию в пост.
1
Klpiyt QERW 2013-10-01 в 11:06 / МатериалСпам
ПОДСКАЖИТЕ! Как изменить ЦВЕТ текста в самаом окне чата? (Например с чёрного на красный)
0
Михаил Сатиров 2013-09-19 в 11:26 / МатериалСпам
что то я установил сайт ..было все норм..но как перешол к последниму Этапу установите код в нижнию часть сайта ..сохранил ..обновил страницы ..а сайта нету))) белый лист ...в чем проблема может быть ..установил точно как на инструкции
0
Карпович Сергей 2013-08-19 в 21:40 / МатериалСпам
что то функция ответить не работает
0
Гость 2013-07-30 в 03:23 / МатериалСпам
если сайт без нижней части есть тока глобальные блоки с 2мя контейнерами!
куда тогда вставлять код в нижнюю часть сайта??
0
Гость 2013-07-21 в 18:37 / МатериалСпам
Денис Абдуллин добрый вечер, подскажите пожалуйста как его установить не с право а с лево, вы в комента. писали что в "chat_over", но уточните где именно, заранее спасибо
0
Гость 2013-06-26 в 11:52 / МатериалСпам
Спасибо Денис всё работает. а у Кого не получается руки кривые. Лишь нету не которых частей и картинок. Но я с этим сам справился.
0
Гость 2013-06-08 в 14:44 / МатериалСпам
erazer.ucoz.com вот что получилось.
1
Гость 2013-05-19 в 11:29 / МатериалСпам
Не отображает картинки, перепробывал все методы, подскажите пожалуйста. Более подробно.
0
Jaguar305 2014-04-27 в 16:16 / МатериалСпам
А можно версию со смайлами и оповещением?
0
Jaguar305 2014-04-27 в 16:01 / МатериалСпам
уже разобралась
0
Jaguar305 2014-04-27 в 15:54 / МатериалСпам
А как изменить картинку "Нет аватара" на свою?
0
Гость 2013-04-10 в 02:14 / МатериалСпам
Народ... Смайлы можно самим прописать. Звук - не обязательная вещь, чат сам обновляется. Если кому то надо уже доделанную версию чата ( Кнопка "Отправить", смайлы, bb-коды, и даже функция Наблюдатель, пишите в скайп KAPRIZKA-ARTEM. помогу чем смогу, когда добавляетесь, пишите комент "По поводу чата" ) Скрин чата ( Доработанного ) - http://f4.s.qip.ru/A3UbvwbU.png
0
Nurbolat Tleubaev 2013-03-08 в 23:01 / МатериалСпам
у меня работает , админу спасибо!!
0
Дмитрий Симонов 2013-02-22 в 20:38 / МатериалСпам
клевая штука - спасибо!
0
Гость 2013-02-16 в 18:33 / МатериалСпам
ВСЁ РАБОТАЕТ! Это вы что то тупите!
0
Гость 2013-02-04 в 22:22 / МатериалСпам
не показывает аватарки. Что делать?
0
Гость 2013-02-04 в 22:24 / МатериалСпам
и можно ли сделать что бы он справа или слева выдвигался?
0
Vladislav Järvinen 2013-02-03 в 17:50 / МатериалСпам
А можно туда вместо чата корзину вставить?
0
Влад VeD 2013-01-24 в 13:08 / МатериалСпам
Что бы показывал аватар, нужно в виде материалов в место $CUSTOM1$ поставить - $AVATAR_URL$
0
Гость 2013-04-09 в 03:18 / МатериалСпам
пожалуйста выложите версию со звуком
0
Гость 2013-01-01 в 17:30 / МатериалСпам
а можно сделать чтоб люди без авторизации могли писать
ответ пожалуйста сюда http://vk.com/mr.mandarin_76
0
Гость 2012-12-22 в 23:05 / МатериалСпам
сам уже сделал!
0
1 2 »
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.