Боба
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1

Для добавления необходима авторизация
Граффити
Форма входа

Закрыть

Блок под чат для сйта на uCoz от waak(a)
Скрипты

Всем привет вот решил написать свою версию блока под чат
в данной версии пользователь сам сможет выбрать положение чата слева - справа или по центру так же оставил возможность скрыть чат
По умолчанию чат находится слева внизу и скрыт по первое сообщение
Перед установкой смотрим дмо
Демо

Установка


В нижнюю часть сайта
Код
<div class="chat_by_waak_bc">
  <div class="chat_by_waak_top">
  <div class="chat_by_waak_ss">
  <i class="fa fa-chevron-circle-down top_chat_imh" aria-hidden="true"></i>
  <i class="fa fa-chevron-circle-up bottom_chat_imh" aria-hidden="true"></i>
  Чат
  </div>
  <div class="chat_by_waak_tuning"><i class="fa fa-cog" aria-hidden="true"></i>
  <div class="chat_by_waak_tuning_ul">
  <ul>
  <li class="position_left dop_position_left">С лева</li>
  <li class="position_centr">По центру</li>
  <li class="position_right">С право</li>
  </ul>
  </div>
  </div>
   
  </div>
  <div class="chat_by_waak_content">
$CHAT_BOX$

</div>
</div>

В таблицу стилей
Код
.chat_by_waak_bc {
  width: 300px;
  height: 400px;
  position: fixed;
  z-index: 2000;
  background: #FFF;
  bottom: -300px;
  margin: 0px 20px;
}
.dop_chat_by_waak_bc {
  bottom: 10px;
}

.chat_by_waak_top {
  background: #000;
  padding: 10px;
  color: #FFF;
  font-size: 13px;
  position: relative;
}

.chat_by_waak_username b {
  color: #434343;
}
.chat_by_waak_username span {
  color: #9DA1A3;
  float: right;
  font-size: 9px;
  cursor: pointer;
}

.chat_by_waak_ss {
  cursor: pointer;
  display: inline;
}

.chat_by_waak_tuning {
  float: right;
  display: inline;
  cursor: pointer;
  font-size: 13px;
}

.chat_by_waak_tuning_ul {
  display: none;
}

.chat_by_waak_tuning:hover .chat_by_waak_tuning_ul{
  display: block;
}

.chat_by_waak_tuning_ul ul {
  position: absolute;
  padding: 20px 0px 0px;
  right: 0;
  top: 0;
  list-style: none;
  width: 120px;
  background: rgba(0,0,0,.8);
  border: 1px solid #000;
  color: #434343;
  font-size: 12px;
  line-height: 20px;
  border-radius: 10px;
  overflow: hidden;
  z-index: 20;
}
.chat_by_waak_tuning_ul ul li {
  display: block;
  color: #FFF;
  cursor: pointer;
  padding: 5px 15px;
}
.chat_by_waak_tuning_ul ul li:hover {
  background: #000;
}

.dop_chat_by_waak_bc_position_left {
  left: 0px!important;
  margin-left: 20px!important;
}

.dop_chat_by_waak_bc_position_centr {
  left: 50%;
  margin-left: -150px;
}
.dop_chat_by_waak_bc_position_right {
  right: 0px;
}

.dop_position_centr, .dop_position_left, .dop_position_right {
  display: none!important;
}

.chat_by_waak_content {
  position: relative;
}

.chat_by_waak_vid_bc {
  padding: 10px;
}
.chat_by_waak_ava {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid #D3E3F9;
  overflow: hidden;
  float: left;
}
.chat_by_waak_ava img {
  width: 45px;
  height: 45px;
  object-fit: cover;
}

.chat_by_waak_text {
  margin-left: 50px;
  padding: 5px 10px 10px;
  border: 1px solid #D3E3F9;
  border-radius: 5px;
  overflow: hidden;
  font-size: 13px;
  background: #E4F0FF;
}

.forma_chat_by_waak {
position: absolute;
  bottom: -55px;
}
.forma_chat_by_waak textarea {
  width: 280px!important;
  padding: 5px 10px!important;
  margin: 0px 10px!important;
  display: block!important;
  height: 40px!important;
  border: 1px solid #D3E3F9!important;
min-height: 40px!important;  
  min-height: 50px!important;
}
.ss_form_chat_by_waak {
  right: 10px;
  position: absolute;
  bottom: 5px;
}
#mchatBtn {
  border: none;
  background: #000;
  color: #FFF;
  cursor: pointer;
  margin-right:10px;
}
.smile_form_chat_by_waak {
  display: block;
  font-size: 22px;
  margin-left:5px;
}
   
   
   
   
.top_chat_imh {
  display: none;
}

.dop_top_chat_imh {
  display: inline;
}

.bottom_chat_imh {
   
}

.dop_bottom_chat_imh {
  display: none;
}

В блоке используются шрифтовые иконки для их подключения вам нужно добавить в самый верх вашей таблицу стилей вот эту строчку
Код
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);

Пункт выше нужно выполнить если у вас на сайте не подключены шрифтовые иконки если же они подключены то пропустите это пункт

Теперь добавим форму добавления сообщения в чат
Код
<div class="forma_chat_by_waak">
<?if(!$CAN_ADD$)?><div align="center"><?if($LOGIN_LINK$)?><a href="$LOGIN_LINK$">Для добавления необходима авторизация</a><?else?>Доступ запрещен<?endif?></div><?else?>
  <div class="ss_form_chat_by_waak">
  <a href="javascript://" rel="nofollow" onclick="new _uWnd('Sml', ' ', -200,-400,{autosize:0, closeonesc:1, resize:0, }, {url:'/index/35-0-2', } ); return false;" title="Вставить смайл"ss class="smile_form_chat_by_waak"> <i class="fa fa-smile-o" aria-hidden="true"></i></a>
  $SUBMIT$
  </div>
$FLD_MESSAGE$  
   
<?endif?></div>

И подключим скрипт на всех страницах перед тегом /body
Код

  <script type="text/javascript" src="/js/chat_by_waak.js"></script>


Ну и конечно же теперь скачиваем сам скрипт и заливаем его в папку js

Особености:

Тематика
Любой сайт
Браузеры
Все последней версии
Адаптация
Нет
Размер
0.8Kb

Скачивать файлы могут только зарегистрированные пользователи, Войдите на сайт под своим именем.

Запись добавлена

Комментарии

12345678qwer 14.04.2017 в 13:02
Хорош!
Design-Just 14.04.2017 в 00:23
Зачем использовать (да и делать) блок под чат такого типа, когда урааа уже придумала давно это
waak 14.04.2017 в 11:27
Я делаю то что просят пользователи а если они просят значит им это нужно и в этой версии у пользователей появляется возможность самим выбрать позицию блока

Добавлять комментарии могут только зарегистрированные пользователи, Войдите на сайт под своим именем.