我现在做一个在线聊天的简单功能,用div显示内容。
滚动条每次都在最下面。
当显示的内容为文字时候,滚动条的位置是正确的。
当显示的内容包含图片的时候,滚动条总是停留在中间位置。
请问如何才能正确获取div的高度呢。<html>
<style type="text/css">
div{line-height:20px;
font-size:14px; }
#msg{
overflow:scroll;
padding:3px;
width:expression(document.body.clientWidth);
background-color:#ffffff;
border:1px inset white;
BORDER-BOTTOM: 2px inset red;"
}
#msg div{
line-height:20px;
}
div img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}</style>
<BODY onLoad="loadok();">
<table id="contentTB" class=layout cellpadding=0 cellspacing=0 width=100% onDblClick="">
<tr style="height:22px;background-image: url(../image/panel_title.jpg);" onDblClick="max();showOrHidden();">
<td >
<b>资讯 </b>
</td>
</tr>
<!-- B.业务数据区:列表 -->
<tr><td colspan=3>
<div id="msg"></div>
</td></tr>
<!-- C.业务数据区:列表翻页控制 -->
<tr style="height:65px;" id="sendTR" >
<td colspan=3>
<form name="chatform" >
<table width=100% >
<tr><td>
<textarea name="content" cols=52 rows=5 style="overflow:auto" style="width:100%"></textarea>
</td></tr>
<tr><td align=left>
<button name="sendbutton" onclick="sendChatInfo()" onKeyDown="javascript: hotkey();" >发送</button>(快捷键:ctrl+ENTER)
</td></tr>
</table>
</form>
</td>
</tr>
<tr style="height:10px;" ><td colspan=3><a onclick="allChat()" style="cursor:hand;color:#000000;text-decoration:underline;">查看所有记录</a>
</td></tr>
</table>
</BODY><!-- =============== Script area =======================-->
<SCRIPT LANGUAGE="JavaScript"> ////////////////=====界面初始化=========
function loadok(){
var ch=document.body.clientHeight ;
var msg=document.getElementById("msg");
msg.style.height=(ch-160)+"px";
check();
}
function check(){
//获取内容
var url = "${pageContext.request.contextPath}/chatInfo.do?method=getGreatByIdJson&oid="+o_id+"&date="+ new Date().getTime();
new Ajax.Request(url, {method:'get',requestHeaders: {Accept: 'application/json'},onSuccess: function(transport) {
var msgVar = document.getElementById("msg");
var divContent="";
var autoScroll = true, height = msgVar.offsetHeight, lh = 20;
var maxid = o_id;
var json = transport.responseText.evalJSON(true);
var date = new Date();
var msgVar = document.getElementById("msg");
for ( var i = json.length-1; i >=0 ; i--) {
date.setTime(json[i].chatDate.time);
if(maxid < json[i].CId)
maxid = json[i].CId;
divContent += "<div width=80 class='colorClass'>"
+json[i].chatName
+ ": ("
+ date.toLocaleTimeString()
+ ")</div><div style='border-left:solid 20px #ffffff;border-bottom:solid 15px #ffffff' >"
+ json[i].content
+ "</div>";
}
var autoScroll = true, height = msgVar.offsetHeight, lh = 20;
(function(){
autoScroll = (msgVar.scrollHeight - msgVar.scrollTop - height + lh) < 5 ? true : false;
msgVar.innerHTML += divContent;
if(autoScroll){
msg.scrollTop = msg.scrollHeight - height + lh;
msgVar.scrollTop = msgVar.scrollHeight ;
}
})();
if(maxid != o_id)
{
o_id = maxid;
}
} });
}
}function sendChatInfo(){
var url = "${pageContext.request.contextPath}/chatInfo.do?method=save&date="+ new Date().getTime();
new Ajax.Request(url,
{
method:
'post',parameters:{'content':c,'content_pure':p},
onSuccess: function(transport) {
var json = transport.responseText.evalJSON(true);
if(o_id ==-1)
o_id = json.CId - 10;
check();
}
});
}setInterval("check()",10000);
</script>
</HTML>
滚动条每次都在最下面。
当显示的内容为文字时候,滚动条的位置是正确的。
当显示的内容包含图片的时候,滚动条总是停留在中间位置。
请问如何才能正确获取div的高度呢。<html>
<style type="text/css">
div{line-height:20px;
font-size:14px; }
#msg{
overflow:scroll;
padding:3px;
width:expression(document.body.clientWidth);
background-color:#ffffff;
border:1px inset white;
BORDER-BOTTOM: 2px inset red;"
}
#msg div{
line-height:20px;
}
div img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}</style>
<BODY onLoad="loadok();">
<table id="contentTB" class=layout cellpadding=0 cellspacing=0 width=100% onDblClick="">
<tr style="height:22px;background-image: url(../image/panel_title.jpg);" onDblClick="max();showOrHidden();">
<td >
<b>资讯 </b>
</td>
</tr>
<!-- B.业务数据区:列表 -->
<tr><td colspan=3>
<div id="msg"></div>
</td></tr>
<!-- C.业务数据区:列表翻页控制 -->
<tr style="height:65px;" id="sendTR" >
<td colspan=3>
<form name="chatform" >
<table width=100% >
<tr><td>
<textarea name="content" cols=52 rows=5 style="overflow:auto" style="width:100%"></textarea>
</td></tr>
<tr><td align=left>
<button name="sendbutton" onclick="sendChatInfo()" onKeyDown="javascript: hotkey();" >发送</button>(快捷键:ctrl+ENTER)
</td></tr>
</table>
</form>
</td>
</tr>
<tr style="height:10px;" ><td colspan=3><a onclick="allChat()" style="cursor:hand;color:#000000;text-decoration:underline;">查看所有记录</a>
</td></tr>
</table>
</BODY><!-- =============== Script area =======================-->
<SCRIPT LANGUAGE="JavaScript"> ////////////////=====界面初始化=========
function loadok(){
var ch=document.body.clientHeight ;
var msg=document.getElementById("msg");
msg.style.height=(ch-160)+"px";
check();
}
function check(){
//获取内容
var url = "${pageContext.request.contextPath}/chatInfo.do?method=getGreatByIdJson&oid="+o_id+"&date="+ new Date().getTime();
new Ajax.Request(url, {method:'get',requestHeaders: {Accept: 'application/json'},onSuccess: function(transport) {
var msgVar = document.getElementById("msg");
var divContent="";
var autoScroll = true, height = msgVar.offsetHeight, lh = 20;
var maxid = o_id;
var json = transport.responseText.evalJSON(true);
var date = new Date();
var msgVar = document.getElementById("msg");
for ( var i = json.length-1; i >=0 ; i--) {
date.setTime(json[i].chatDate.time);
if(maxid < json[i].CId)
maxid = json[i].CId;
divContent += "<div width=80 class='colorClass'>"
+json[i].chatName
+ ": ("
+ date.toLocaleTimeString()
+ ")</div><div style='border-left:solid 20px #ffffff;border-bottom:solid 15px #ffffff' >"
+ json[i].content
+ "</div>";
}
var autoScroll = true, height = msgVar.offsetHeight, lh = 20;
(function(){
autoScroll = (msgVar.scrollHeight - msgVar.scrollTop - height + lh) < 5 ? true : false;
msgVar.innerHTML += divContent;
if(autoScroll){
msg.scrollTop = msg.scrollHeight - height + lh;
msgVar.scrollTop = msgVar.scrollHeight ;
}
})();
if(maxid != o_id)
{
o_id = maxid;
}
} });
}
}function sendChatInfo(){
var url = "${pageContext.request.contextPath}/chatInfo.do?method=save&date="+ new Date().getTime();
new Ajax.Request(url,
{
method:
'post',parameters:{'content':c,'content_pure':p},
onSuccess: function(transport) {
var json = transport.responseText.evalJSON(true);
if(o_id ==-1)
o_id = json.CId - 10;
check();
}
});
}setInterval("check()",10000);
</script>
</HTML>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货