Author Topic: Отображение чата внутри окна сайта  (Read 10764 times)

0 Members and 1 Guest are viewing this topic.

keir

  • Jr. Member
  • **
  • Posts: 2
    • Twitter
Привет.
В мою задачу входило установить чат на сайт, но не использовать отдельное окно для него. И я хочу поделиться своим решением.
Требуется добавить только JS код, приведенный ниже. Никакие изменения верстки не требуются.
Естественно на сайте должна быть подключена библиотека jQuery.
Code: [Select]
jQuery(document).ready(function(kmbw) {

    var mibewPath = '/mibew',
    mibewHeight = 0,
        mibewTop = 0,
        mibewLeft = 0,
        mibewRight = 50,
        mibewActive = 0,
        mibewShortcut = '<div id="mibew_shortcut"'+
'style="'+
'display: block;'+
'position: absolute;'+
'width: 177px;'+
'height: 61px;'+
'z-index: 9999;'+
'cursor: pointer;">'+
'<img src="' + mibewPath + '/b.php?i=mgreen&amp;lang=ru" border="0" width="177" height="61" alt="" />'+
'</div>';

kmbw(mibewShortcut).appendTo('body');

        positionMibew('#mibew_shortcut');

kmbw('#mibew_shortcut').click(function() {
mibewActive = 1;
kmbw(this).hide(0);
kmbw(this).after('<div id="mibew_window"'+
'style="'+
'display: block;'+
'position: absolute;'+
'width: 670px;'+
'height: 480px;'+
'z-index: 9999;'+
'">'+
'<iframe id="mibew_content" align="left" width="640" height="480" hspace="0" vspace="0" marginwidth="0" marginheight="0" scrolling="no" src="' + mibewPath + '/client.php?locale=ru&amp;style=silver&amp;url='+escape(document.location.href)+'&amp;referrer='+escape(document.referrer)+'"></iframe>'+
'<span style="background-color: #fff;">&nbsp;<a href="#" onclick="jQuery.closeMibewChat()"><b>[X]</b></a>&nbsp;</span></div>');
    positionMibew('#mibew_window');
});

kmbw.closeMibewChat = function () {
kmbw('#mibew_window').remove();
kmbw('#mibew_shortcut').show();
mibewActive = 0;
}

    function positionMibew(div_id) {
    mibew = kmbw(div_id);   
    mibewHeight = mibew.height();
    mibewWidth = mibew.width();
    mTop = (kmbw(window).scrollTop()+kmbw(window).height()-mibewHeight);
    if (mTop > 0) {
mibewTop = mTop+"px";
    } else {
    mibewTop = 0+"px";
    }
mibewLeft = (kmbw(window).scrollLeft()+kmbw(window).width()-mibewWidth-mibewRight)+"px";

mibew.css({
top: mibewTop,
left: mibewLeft
})
}

kmbw(window)
.scroll(function() {
if (mibewActive == 1) {
positionMibew('#mibew_window');
} else {
positionMibew('#mibew_shortcut');
}
})
.resize(function() {
if (mibewActive == 1) {
positionMibew('#mibew_window');
} else {
positionMibew('#mibew_shortcut');
}
});

});
« Last Edit: May 29, 2014, 09:42:23 AM by keir »

Xalbig

  • Jr. Member
  • **
  • Posts: 1
Re: Отображение чата внутри окна сайта
« Reply #1 on: June 16, 2014, 06:52:57 AM »
Подскажите, куда именно вставлять этот код?

keir

  • Jr. Member
  • **
  • Posts: 2
    • Twitter
Re: Отображение чата внутри окна сайта
« Reply #2 on: June 16, 2014, 08:14:03 AM »
Вариантов несколько. Один из них - вставить код в <head> сайта, например:
Code: [Select]
<html>
<head>
<title>My site</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
...весь код из первого поста...
</script>
</head>
<body>
...

malorik

  • Full Member
  • ***
  • Posts: 9
Re: Отображение чата внутри окна сайта
« Reply #3 on: July 15, 2014, 03:33:49 AM »
Не могил бы вы показать на примере своего сайта как это выглядит! Можно ссылку?))

malorik

  • Full Member
  • ***
  • Posts: 9
Re: Отображение чата внутри окна сайта
« Reply #4 on: July 16, 2014, 05:50:49 AM »
Здорово получилось


Поделитесь опытом, если вдруг есть идея по этому поводу! Как заставить автоматически открываться и через 5 сек автоматически закрываться окно чата!?

malorik

  • Full Member
  • ***
  • Posts: 9
Re: Отображение чата внутри окна сайта
« Reply #5 on: July 21, 2014, 11:48:07 AM »
А этот код работает в mibew2.0?