Сворачивающийся ЧАТ под кнопкой

автор Xan_Kriegor Январь 16th 2014, 19:18

Помогите решить плиз.

автор **Dana Domirani** Январь 21st 2014, 15:05

Для начала включите стандартный чат

Па > Модули > Чат - Конфигурация > Активировать ЧАТ : да
Показ ЧАТа : не показывать

1. В шаблон overall_footer_end перед строкой

Код:: </body> </html>

добавьте код

Код:: <div style="clear:both;"></div> <div class="slide_panel_chat"> <div class="chatboxins"> <iframe src="/chatbox/index.forum" id="chatbox_ret" name="chatbox_ret" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="width: 100%; height: 400px"></iframe> </div> <p class="openchat">МиниЧат</p> </div> <div style="clear:both;"></div>

Сохраните, опубликуйте (!)

2. В ПА > Модули > Управление кодами JS укажите Активировать управление кодами JS : да
Создайте новый файл и заполните следующим образом:
Название: любое, например, чатподкнопкой
Расположение: на всех страницах
Код:

Код:: $(document).ready(function(){ $("div.slide_panel_chat p.openchat").toggle(function(){ $("div.chatboxins").animate({width:'550px', opacity: 1},100);}, function() { $("div.chatboxins").animate({width: "0", opacity: 0},100); }); $('p.openchat').click(function(){ $(this).toggleClass('opened').toggleClass('closed'); if($(this).hasClass('opened')) { $(this).html('Свернуть'); } else { $(this).html('МиниЧат'); } }); });

Сохраните.

3. Добавьте в CSS:

Код:: /* чат */ .chatboxins { margin: 10px 0 10px; } #chatbox_ret { border: 1px solid #666; } #chatbox_messenger_form { margin: 10px 0px; padding: 0 0 20px; } #chatbox_members, #chatbox { bottom: 79px; } #chatbox_ret, p.openchat { -webkit-box-shadow: -9px 0px 9px 0px rgba(0, 0, 0, 0.85); -moz-box-shadow: -9px 0px 9px 0px rgba(0, 0, 0, 0.85); box-shadow: -9px 0px 9px 0px rgba(0, 0, 0, 0.85); } /* высплывающий блок чата */ .slide_panel_chat { position:fixed; left: 5px; bottom: 0px; z-index: 999; } .chatboxins { width: 0; opacity: 0 } #chatbox_members { width: 120px; font-size: 10px; border-right: 1px solid #666; } #chatbox_footer { border-top: 1px solid #666; } #chatbox { left: 121px; background: transparent url("http://i56.servimg.com/u/f56/15/82/36/69/grunge10.png") repeat 0% 0% !important; } /* поле ввода текста в чате */ #message { background-color: #eee !important; border: 1px solid #666; color: #999; outline: transparent !important; } /* размер текста в чате */ .chatbox_row_1, .chatbox_row_2 { font-size: 12px; } /* нечетные ответы */ .chatbox_row_1 { background-color: transparent !important; } /* четные ответы */ .chatbox_row_2 { background: transparent url("http://i56.servimg.com/u/f56/15/82/36/69/20670510.png") repeat center; } /* кнопки чата */ #chatbox_messenger_form .right { background-color: #ddd !important; border-bottom: none !important; margin: 3px !important; padding: 3px; color: #666 !important; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } /* кнопки чата */ #chatbox_messenger_form .fontbutton { background-color: transparent; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #666; } /* кнопки чата - подсветка + выделение */ #chatbox_messenger_form .fontbutton:hover, #chatbox_messenger_form .fontbutton_selected { background-color: #00AEFF !important; border: 1px solid #00A4FF !important; } /* убрать надпись ЧАТ */ .chatbox-title { width: 0; font-size: 0px; padding-top: 10px; } /* Обновить | Архив | Автоматическое обновление | Выход | Вход */ .chatbox-options a, .chatbox-options label { color: #00c4ff !important; } /* поставить надпись Миничат*/ .chatbox-title:before { content: "МиниЧат"; width: 80px; font-size: 10px; padding-top: 10px; color: #00A4FF !important; } /* Кнопка МиниЧат (открывающая / закрывающая) */ p.openchat { margin: 0 0 20px; display: block; border: 2px solid rgb(71, 71, 71); background-color: #1a1a1a; padding: 8px; width: 80px; float: left; color: #00a6ff !important; text-align:center; cursor: pointer; } /* кнопка Отправить в чате */ #chatbox_messenger_form #submit_button { background-color: transparent; border: 1px solid #00A4FF; color: #00A4FF; font-size: 11px; padding: 2px 5px; border-radius: 3px; } #chatbox_messenger_form #submit_button:hover { background-color: #00A4FF; border: 1px solid #00A4FF; color: #000; }

Сворачивающийся ЧАТ под кнопкой

Сворачивающийся ЧАТ под кнопкой

Re: Сворачивающийся ЧАТ под кнопкой