Javascript 调整无序列表上聊天气泡的大小
我有一个无序的列表,作为聊天平台。当用户将每条消息附加到列表中时,我让它在后面显示一个聊天气泡,但是,聊天气泡的大小与附加的每条消息的大小相同,这意味着如果消息包含一定数量的字符,它将显示在气泡之外。有没有一种方法可以让聊天泡泡根据消息的大小自行调整大小?最好在大约25个字符之后,我希望消息开始一行,气泡在高度上扩展。另一方面,如果一条消息只有5个字符长,则聊天泡泡将调整大小以适应该长度 下面是一幅说明问题的图片: 这是我的Jquery/JavascriptJavascript 调整无序列表上聊天气泡的大小,javascript,jquery,css,list,chat,Javascript,Jquery,Css,List,Chat,我有一个无序的列表,作为聊天平台。当用户将每条消息附加到列表中时,我让它在后面显示一个聊天气泡,但是,聊天气泡的大小与附加的每条消息的大小相同,这意味着如果消息包含一定数量的字符,它将显示在气泡之外。有没有一种方法可以让聊天泡泡根据消息的大小自行调整大小?最好在大约25个字符之后,我希望消息开始一行,气泡在高度上扩展。另一方面,如果一条消息只有5个字符长,则聊天泡泡将调整大小以适应该长度 下面是一幅说明问题的图片: 这是我的Jquery/Javascript $('#submit').clic
$('#submit').click(function(){
var message = $('#typetextbox').val();
if (message.replace(/ /g, '')){
var positions = makeNewPosition();
var el = $('<li>'+message+'</li>');
el.attr('gridpos', positions[0].toString()+"x"+positions[1].toString())
el.css('left', positions[1] * window.li_width);
el.css('top', positions[0] * window.li_height);
$('#messagebox').append(el);
setTimeout(function() {
el.fadeOut();
var gridpos = el.attr('gridpos');
delete window.grid[gridpos];
}, 4000 );
}
$("#typetextbox").val("");
});
});
window.grid = {};
window.li_height = 20;
window.li_width = 200;
function makeNewPosition(){
var h = Math.floor($(window).height()/window.li_height);
var w = Math.floor($(window).width()/window.li_width);
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
var gridpos = nh.toString() + "x" + nw.toString();
if(typeof window.grid[gridpos] == 'undefined'){
return [nh,nw];
}else{
return makeNewPosition();
}
很抱歉提供了很多代码,但我不确定我的问题在哪里。我假设它是用Javascript而不是使用背景图像来纠正的?感谢您的帮助。身高:24px;原因是,使用最小高度:24px;相反
是位置:绝对;必选?你能为你的问题添油加醋吗?我担心当我复制并粘贴我的代码来添油加醋时,奇怪的是,即使是基本的代码也不起作用。我试过了。基本上,每当消息中的字符超过'li'220px的宽度时,它们就会在消息框外增长。我希望得到一个围绕着信息本身的信息框。有什么想法吗?@Mritunjay我添加了一个链接来说明这个问题。可能是重复的
li{
height: 24px;
width: 220px;
margin: 2px;
padding: 5px;
position: absolute;
z-index: -2;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
background-image: url(Images/chat-bubble-left-flick.png);
background-repeat: no-repeat;
background-position: -25px center;
}
ul{
list-style:none;
}