Чат как на Facebook'e by doc74


Чат как на Facebook'e by doc74

3440
7.2 из 10
Проголосовало: 15






Изначально чат делался для "Живого блога" или как он щас называется "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?>
Автор публикации: Загрузка
Загрузка
doc74, это его n материал
Источник: http://webo4ka.ru/
  • Всего комментариев: 17

Radviger
0
Radviger написал: Написано 03 Февраля 2013 в 11:20
Комментарий №17
У меня вообще окно не разворачивается ((

Артём9887
0
Артём9887 написал: Написано 16 Декабря 2012 в 12:40
Комментарий №16
А как сделать его уже и изменить цвет блока синего где надпись развернуть ?

Ishenko(Boston)
0
Ishenko(Boston) написал: Написано 01 Декабря 2012 в 22:05
Комментарий №15
когда планируется 2 версия?

Вовчик
0
Вовчик написал: Написано 19 Ноября 2012 в 20:33
Комментарий №13
а куда в демо нужно тыкнуть, что бы чат открылся?

doc74
0
doc74 написал: Написано 20 Ноября 2012 в 05:51
Комментарий №14
там после авторизации:
Демо-юзер:
login - zZz
Passw - qwertyklawa1

Master
0
Master написал: Написано 19 Ноября 2012 в 18:13
Комментарий №11
А сообщения сами обновляются?

doc74
0
doc74 написал: Написано 19 Ноября 2012 в 18:20
Комментарий №12
во 2 версии да

BLAzER
0
BLAzER написал: Написано 19 Ноября 2012 в 14:47
Комментарий №6
Неправильный код безопасности - Его там вообще нету

doc74
0
doc74 написал: Написано 19 Ноября 2012 в 15:09
Комментарий №7
код безопасности тут не сделан, в следуещей версии все будет норм...

Master
0
Master написал: Написано 19 Ноября 2012 в 15:35
Комментарий №9
Я лично его вообще отключил для чата)

kolyan1282
0
kolyan1282 написал: Написано 19 Ноября 2012 в 17:15
Комментарий №10
и админ панель тоже прикрепите пожалуста

kolyan1282
0
kolyan1282 написал: Написано 19 Ноября 2012 в 12:08
Комментарий №4
Подскажите почему так вышло и что нужно изменить http://s58.radikal.ru/i160/1211/15/6436e2808ace.jpg

Master
0
Master написал: Написано 19 Ноября 2012 в 14:05
Комментарий №5
Значит что-то неправильно установил навреное...

doc74
0
doc74 написал: Написано 19 Ноября 2012 в 15:18
Комментарий №8
Видимо у вас конфликт скриптов. т.к. если растянуть чат на весь экран, положение скроллинга не изменится

kolyan1282
0
kolyan1282 написал: Написано 19 Ноября 2012 в 11:38
Комментарий №3
подскажите как изменить синй цвет чата на другой?

Master
0
Master написал: Написано 19 Ноября 2012 в 01:25
Комментарий №2
А почему сворачивание и разворачивание не запоминается?(

Master
0
Master написал: Написано 19 Ноября 2012 в 01:12
Комментарий №1
Спасибо)

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