Скролбар в диве, опускание вниз

partiz · April 3, 2008

Нужно сделать мини чат, и требуется, чтобы сообщения в диве отображались внизу дива. Т.е. когда див чата оверфлоу (переполняется), и срабатывает прокрутка, нужно, чтобы старое уползало вверх, а див сам прокручивался вниз и показывал новые мессаги.

Не соображаю, как сделать, подскажите, пожалуйста.

Набросал примерный код для теста:

(почему-то в фаерфоксе при добавлении строки из message в chat, содежримое chat выравнивается по центру, а при переполнении chat, прокрутка не появляется... помогите и с этим разобраться, пожалуйста)

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <title>Мой чат</title>
</head>

<body style="margin: 0px; padding: 0px;">
<script language="JavaScript" type="text/javascript">
 function onSendMessage() {
 if (document.getElementById("message").value!="") {
 document.getElementById("chat").innerHTML=document.getElementById("chat").innerHTML+"
"+document.getElementById("message").value;
 document.getElementById("message").value="";
 document.getElementById("message").focus();
 }
 }
 function onPressEnter(myevent) {
 myevent = (myevent) ? myevent : event;
 if ('keydown' == myevent.type && 13==myevent.keyCode) onSendMessage();
 }
</script>
<table width="1000" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr height="100%">
 <td width="750" height="100%">
 <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
 <tr height="100%">
 <td height="100%" valign="top">
 <div id="chat" height="100%" style="display:table;width:100%;height:100%;border:1px dotted #cccccc; OVERFLOW: auto; scroll: auto;">
 Тут чат.
 </div>
 </td>
 </tr>
 <tr>
 <td height="100">
 <b>Отправка сообщения</b> <span id="condition"></span>

 <input id="message" type="text" value="" style="width: 400px" onkeydown="onPressEnter(event)"/> <input type="button" name="" value=" Сказать " onclick="onSendMessage()"/>
 <script language="JavaScript" type="text/javascript">
 document.getElementById("message").focus();
 </script>
 </td>
 </tr>
 </table>
 </td>
 <td width="250" height="100%">
 <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td> </td>
 </tr>
 <tr height="100%">
 <td height="100%"> </td>
 </tr>
 <tr>
 <td> </td>
 </tr>
 </table>
 </td>
</tr>
</table>
</body>

</html>

partiz · April 3, 2008

С мозиллой непонятная штука получается...

если убрать "display: table", тогда все ок, но в этом случае опера отображает див Чат высотой в 1 пиксель (просто показывает границы дива), хотя, если поставить фиксированную высоту дива (что не нужно делать в данном случае), тогда все ок (опера показывает див нужной высоты).

Подскажите, как сделать кроссбраузерно, чтобы все браузеры отображали желаемый результат.

Storm · April 3, 2008

Вот набросал пример.

Если обновлять страницу, скролл будет прокручиваться к нижней строке в div-е.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>TITLE</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#scroll_box {height:100px;overflow:auto;border:1px solid red;}
/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function go_bottom()
{
var objDiv = document.getElementById("scroll_box");
objDiv.scrollTop = objDiv.scrollHeight;
}
/*]]>*/
</script>
</head>

<body onload="go_bottom()">
<div id="scroll_box">
1
2
3
4
5
6
7
8
9
10

</div>
</body>
</html>

partiz · April 3, 2008

2 Storm ... спасибо, помогло! =)

осталось решить проблему с версткой )))

partiz · April 3, 2008

эту тему можно клоуз.

я по проблеме высоты дива в верстку напишу (т.е. туда, где по идее должна быть эта тема), чтобы скорее дождаться ответа.

изначально хотел эту тему написать в верстке, но запутался в открытых ветках форума и, случайно, создал здесь.

Sign In

Скролбар в диве, опускание вниз

Question

partiz

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

partiz

Link to comment

Share on other sites

Storm

Link to comment

Share on other sites

partiz

Link to comment

Share on other sites

partiz

Link to comment

Share on other sites

Обсуждения

Forums

Important Information