javascript聊天箱/信使脚本
javascript chatbox / messenger script
我正试图写一个类似facebook的聊天框,但遇到了一个小问题。我正在使用以下代码(这只是测试代码,所以它不是真正干净的):
css代码:
#messenger {
position: fixed;
bottom: 0px;
right: 10px;
width: 200px;
height: 300px;
z-index: 4;
background-color: #ECECEC;
border: 1px solid #000;
}
#messenger.p {
text-align: right;
}
#contacts {
margin: 5px 5px 5px 5px;
}
#chatspace {
position: fixed;
bottom: 0px;
right: 240px;
height: 20px;
left: 20px;
background-color: #ECECEC;
border: 1px solid #000;
z-index: 4;
}
.chatbox {
position: absolute;
bottom: 0px;
width: 200px;
height: 200px;
z-index: 4;
background-color: #ECECEC;
border: 1px solid #000;
}
html/javascript代码:
<script type="text/javascript">
var i = 0;
function oc_chatbox() {
if (i == 0) {
document.getElementById('contacts').style.visibility = 'hidden';
document.getElementById('messenger').style.height = '20px';
i = 1;
}
else {
document.getElementById('contacts').style.visibility = 'visible';
document.getElementById('messenger').style.height = '300px';
i = 0;
}
}
function new_chat(userid) {
var new_right;
new_right = document.getElementById('messenger').style.right;
//alert('old value: '+ new_right);
new_right += 20;
//alert('New value of right: '+ new_right);
document.getElementById('chatspace').innerHTML = '<div id="'+userid+'" class="chatbox" style="right: '+new_right+'px;"></div>';
//document.write('<div id="'+userid+'" class="chatbox" style="right: '+new_right+'px;"></div>');
}
</script>
<div id="chatspace"></div>
<div id="messenger">
<p><a href="#" onclick="oc_chatbox();">Collapse</a></p>
<div id="contacts">
<ul>
<li><a href="#" onclick="new_chat('contact_a');">contact A</a></li>
</ul>
</div>
</div>
问题是,当我试图将新聊天添加到聊天栏时,我似乎无法将它们放在一起。有谁能帮忙吗?
编辑:
所以我把javascript代码改为:
var last = null;
function new_chat(userid) {
if(userid==null)
userid = "user666";
var new_right;
var margin = 10;
var messenger = window.last==null?document.getElementById('messenger'):window.last; //Take the messenger or the last added chat
new_right = document.body.clientWidth-messenger.offsetLeft; //Compute the window size
console.log(new_right); //Log the number
new_right += margin; //keep spaces between divs
var newChat = document.createElement("div"); //DOM create DIV
newChat.id = userid;
newChat.className = "chatbox shadow";
newChat.style.right = new_right+"px";
newChat.innerHTML = '<p>'+userid+'</p><p><textarea></textarea></p>';
window.last = newChat; //Remember whichever is last
document.body.appendChild(newChat);
}
现在它工作了,谢谢!
除非样式已设置且有效,否则无法使用其样式获得元素的右偏移量。相反,您必须获取element.offsetLeft
和窗口区域的大小,然后执行以下操作:
new_right = windowSize()[0]-messenger.offsetLeft;
其中窗口大小是此函数。
这是我的,工作的,你的功能版本:
var last = null;
function new_chat(userid) {
if(userid==null)
userid = "user666";
var new_right;
var margin = 20;
var messenger = window.last==null?document.getElementById('messenger'):window.last; //Take the messenger or the last added chat
new_right = windowSize()[0]-messenger.offsetLeft; //Compute the window size
console.log(new_right); //Log the number
new_right += margin; //keep spaces between divs
var newChat = document.createElement("div"); //DOM create DIV
newChat.id = userid;
newChat.className = "chatbox";
newChat.style.right = new_right+"px";
window.last = newChat; //Remember whichever is last
document.body.appendChild(newChat);
}
如果您的浏览器中未定义console
,则可能会出现错误。但在这种情况下,你应该使用更好的浏览器。通常,if(console!=null)
被放入代码中
这是链接。
您应该尝试添加一个float样式。
.chatbox {
float: right;
}
将其添加到您的聊天框样式中。你可能需要弄得一团糟,以确保浮子不会干扰你的其他元素。你可能需要一个更好的容器来装它们。
如果你想获得真正的乐趣,你可以从jQuery中添加.draggable(),然后让它们捕捉到你的聊天栏中。然后,您可以更改聊天的顺序。
相关文章:
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 借助asp.net验证或java脚本对多个文本进行验证
- chrome扩展:尽管运行了at:documentidle,js脚本还是过早启动
- Java脚本时间添加
- 不显示带有本地json文件数据的谷歌地图脚本
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 有任何可能将facebook实时信使整合到一个网站中
- 从远程脚本获取用户IP
- 如何根据时间运行不同的脚本
- 如何将字符串值从php页面发送到java脚本页面
- 使用谷歌应用程序脚本将服务器端数据表返回到客户端
- 可以设置“;文件名"发生错误时显示的内联脚本标记的
- 当脚本由system.js加载时,如何要求('electron')
- HTML标记在脚本标记中工作
- 是否可以控制获取哪些Google地图脚本(JavaScript API)
- 使用谷歌应用程序脚本从工作表中获取值并将其显示在文本框中
- 显示时间的脚本
- ng应用程序使脚本无限运行
- 如何在运行时在angular 2中加载外部js脚本
- javascript聊天箱/信使脚本