Отображение чата внутри окна сайта

General > Русский (ru)

(1/2) > >>

keir:
Привет.
В мою задачу входило установить чат на сайт, но не использовать отдельное окно для него. И я хочу поделиться своим решением.
Требуется добавить только JS код, приведенный ниже. Никакие изменения верстки не требуются.
Естественно на сайте должна быть подключена библиотека jQuery.

--- Code: ---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&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&style=silver&url='+escape(document.location.href)+'&referrer='+escape(document.referrer)+'"></iframe>'+
'<span style="background-color: #fff;"> <a href="#" onclick="jQuery.closeMibewChat()"><b>[X]</b></a> </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');
}
});

});

--- End code ---

Xalbig:
Подскажите, куда именно вставлять этот код?

keir:
Вариантов несколько. Один из них - вставить код в <head> сайта, например:

--- Code: ---<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>
...

--- End code ---

malorik:
Не могил бы вы показать на примере своего сайта как это выглядит! Можно ссылку?))

malorik:
Здорово получилось

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

Navigation

[0] Message Index

[#] Next page

Go to full version