ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Таблицы
16 сообщений из 16, страница 1 из 1
Таблицы
    #35434105
Фотография XDiaBLo
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
XDiaBLo
Участник
Хочу сделать чат на Java, чтобы попрактиковаться с JSP, пока изучаю JavaScript чтобы разобраться с Ajax, и накидываю общий вид странички. Код ниже. Как сделать чтоб таблица не уползала вместе со строкой на ввод и кнопкой "Отправить", когда в окно чата вывелось уже слишком много строк, а просто появилась полоса прокрутки? Возможно ли сделать это внутри таблицы?

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
<html>
<body bgcolor="#aaaaaa">
<script>
function send()
{
	var table = document.getElementById('chatWindow');
        var tr  = document.createElement('TR');
	var td1 = document.createElement('TD');
	table.appendChild(tr);
        tr.appendChild(td1);
	td1.appendChild(document.createTextNode(document.forms.chatTable.elements.userInput.value));
}
</script>
<form id=chatTable>
<table border="1" width="100%"  height="100%" cellpadding="0" cellspacing="0">
	<tr height="95%" bgcolor="#aaaaaa">
		<td width="80%" valign="top"> 
			<table width="100%">
				<tbody id="chatWindow">
				</tbody>
			</table>
		</td>
		<td width="20%" valign="top" bgcolor="#888888"> 
		</td>
	</tr>
	<tr height="5%" bgcolor="#aaaa77">
		<td width="80%"> 
			<form>
				<input id="userInput" type="text" name="inputText" size="100" />
				<input type="button" value="Отправить" onclick="send();" />
			</form>
		</td>
		<td width="20%">
			<form action="quit" method="post" enctype="text/plain">
				<input type="submit" value="Выйти">
			</form>
		</td>
	</tr>
</table>
</form>
</body>
</html>
...
Рейтинг: 0 / 0
16.07.2008, 15:27
| Ответить | Цитировать | Написать  
Таблицы
    #35434130
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
Резиновая таблица в div'е со стилем "overflow: auto;".
...
Рейтинг: 0 / 0
16.07.2008, 15:35
| Ответить | Цитировать | Написать  
Таблицы
    #35434161
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
XDiaBLoВозможно ли сделать это внутри таблицы?

Внутри таблицы такое сделать возможно, но не кроссбраузерно (повесить overflow на tbody таблицы, кнопки поместить в tfoot). Поэтому однозначно кнопки из таблицы нужно вынести, а таблицу заключить в div с overflow и height (либо делать вложенные таблицы, если важен табличный макет верстки).
...
Рейтинг: 0 / 0
16.07.2008, 15:44
| Ответить | Цитировать | Написать  
Таблицы
    #35434167
Фотография XDiaBLo
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
XDiaBLo
Участник
IDVsbruckРезиновая таблица в div'е со стилем "overflow: auto;".
Спасибо, теперь нужно разобраться как этот div туда вписать...
...
Рейтинг: 0 / 0
16.07.2008, 15:44
| Ответить | Цитировать | Написать  
Таблицы
    #35434195
Фотография XDiaBLo
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
XDiaBLo
Участник
illion XDiaBLoВозможно ли сделать это внутри таблицы?

Внутри таблицы такое сделать возможно, но не кроссбраузерно (повесить overflow на tbody таблицы, кнопки поместить в tfoot). Поэтому однозначно кнопки из таблицы нужно вынести, а таблицу заключить в div с overflow и height (либо делать вложенные таблицы, если важен табличный макет верстки).
Да по мне лишь бы фреймов не было, я потом Аякс туда впаяю чтобы в элементе <tbody id="chatWindow"> текст добавлять. Пока имитация, т.к. серверную часть ещё не написал. Я программист, а не вебмастер, так что html и javascript с Аяксом изучаю параллельно с созданием странички, поэтому рад любым советам.
...
Рейтинг: 0 / 0
16.07.2008, 15:51
| Ответить | Цитировать | Написать  
Таблицы
    #35434223
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
немного невнимательно макет Ваш просмотрела... Вложенные таблицы уже есть, осталось чуть подправить:

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
<td width="80%" valign="top"> 
	<div style="overflow:auto; height:100%">	
		<table width="100%">
			<tbody id="chatWindow">
			</tbody>
		</table>
	</div>
</td>
...
Рейтинг: 0 / 0
16.07.2008, 15:57
| Ответить | Цитировать | Написать  
Таблицы
    #35435454
Фотография XDiaBLo
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
XDiaBLo
Участник
illionнемного невнимательно макет Ваш просмотрела... Вложенные таблицы уже есть, осталось чуть подправить:

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
<td width="80%" valign="top"> 
	<div style="overflow:auto; height:100%">	
		<table width="100%">
			<tbody id="chatWindow">
			</tbody>
		</table>
	</div>
</td>

Спасибо, получилось.

Только вот не знаю как теперь ограничить число строк, в чате же их обычно не миллион выводится, а к примеру 50, а лишние старые строки удаляются...
...
Рейтинг: 0 / 0
17.07.2008, 06:59
| Ответить | Цитировать | Написать  
Таблицы
    #35435470
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
Код: plaintext
1.
2.
3.
4.
5.
function send()
{
	var tbl = document.getElementById('chatWindow');
	tbl.insertRow(- 1 ).insertCell(- 1 ).appendChild(document.createTextNode(document.getElementById('userInput').value));
	while (tbl.rows.length >  50 ) tbl.deleteRow( 0 );
}

информацию по использованным методам можно найти здесь: DOM Table , DOM TableRow
...
Рейтинг: 0 / 0
17.07.2008, 07:23
| Ответить | Цитировать | Написать  
Таблицы
    #35435483
Фотография XDiaBLo
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
XDiaBLo
Участник
illion
Код: plaintext
1.
2.
3.
4.
5.
function send()
{
	var tbl = document.getElementById('chatWindow');
	tbl.insertRow(- 1 ).insertCell(- 1 ).appendChild(document.createTextNode(document.getElementById('userInput').value));
	while (tbl.rows.length >  50 ) tbl.deleteRow( 0 );
}

информацию по использованным методам можно найти здесь: DOM Table , DOM TableRow
Спасибо за бесценные советы :) А чтобы фокус на последнюю строчку перевести, не трогая полосу прокрутки появившуюся сбоку, обязательно якоря ставить придётся на каждую строчку, или есть варианты?
...
Рейтинг: 0 / 0
17.07.2008, 07:38
| Ответить | Цитировать | Написать  
Таблицы
    #35435564
Фотография XDiaBLo
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
XDiaBLo
Участник
XDiaBLo illion
Код: plaintext
1.
2.
3.
4.
5.
function send()
{
	var tbl = document.getElementById('chatWindow');
	tbl.insertRow(- 1 ).insertCell(- 1 ).appendChild(document.createTextNode(document.getElementById('userInput').value));
	while (tbl.rows.length >  50 ) tbl.deleteRow( 0 );
}

информацию по использованным методам можно найти здесь: DOM Table , DOM TableRow
Спасибо за бесценные советы :) А чтобы фокус на последнюю строчку перевести, не трогая полосу прокрутки появившуюся сбоку, обязательно якоря ставить придётся на каждую строчку, или есть варианты?
В смысле чтобы автоматом показывало конец окна с текстом, без дёргания пользователем полосы прокрутки.
...
Рейтинг: 0 / 0
17.07.2008, 09:05
| Ответить | Цитировать | Написать  
Таблицы
    #35435626
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
XDiaBLoА чтобы фокус на последнюю строчку перевести, не трогая полосу прокрутки появившуюся сбоку, обязательно якоря ставить придётся на каждую строчку, или есть варианты?
Код: plaintext
1.
2.
3.
4.
5.
6.
function send()
{
	var tbl = document.getElementById('chatWindow');
	tbl.insertRow(- 1 ).insertCell(- 1 ).appendChild(document.createTextNode(document.getElementById('userInput').value));
	while (tbl.rows.length >  100 ) tbl.deleteRow( 0 );
	tbl.rows[tbl.rows.length- 1 ].scrollIntoView(true);
}

но со scrollIntoView будет неувязка в Опере (не будет работать). Но и работу якорей в Опере проверить надо (что-то тут такое на форуме обсуждалось похожее, не помню уже итог).
...
Рейтинг: 0 / 0
17.07.2008, 09:33
| Ответить | Цитировать | Написать  
Таблицы
    #35435666
Фотография XDiaBLo
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
XDiaBLo
Участник
illion XDiaBLoА чтобы фокус на последнюю строчку перевести, не трогая полосу прокрутки появившуюся сбоку, обязательно якоря ставить придётся на каждую строчку, или есть варианты?
Код: plaintext
1.
2.
3.
4.
5.
6.
function send()
{
	var tbl = document.getElementById('chatWindow');
	tbl.insertRow(- 1 ).insertCell(- 1 ).appendChild(document.createTextNode(document.getElementById('userInput').value));
	while (tbl.rows.length >  100 ) tbl.deleteRow( 0 );
	tbl.rows[tbl.rows.length- 1 ].scrollIntoView(true);
}

но со scrollIntoView будет неувязка в Опере (не будет работать). Но и работу якорей в Опере проверить надо (что-то тут такое на форуме обсуждалось похожее, не помню уже итог).
Если это глюк оперы, да пусть не работает, всё равно в этом чате кроме меня и моих друганов никто сидеть не будет, поэтому тех у кого Опера заставлю юзать фаерфокс. Оперу я давно не люблю, она глючная и тормозная, ни одной приличной версии не видел, и за что её все любят?
...
Рейтинг: 0 / 0
17.07.2008, 09:47
| Ответить | Цитировать | Написать  
Таблицы
    #35435731
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
Щас токошто запустил своё приложение в опере с scrollIntoView - там как раз такая же ситуация со строкой таблицы.
Опера 9.24 - прекрасно работает. Только, поскольку я не знал про параметр true , который - писал без него.
...
Рейтинг: 0 / 0
17.07.2008, 10:10
| Ответить | Цитировать | Написать  
Таблицы
    #35442627
Фотография XDiaBLo
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
XDiaBLo
Участник
Хмм, читаю книгу по Аяксу (Аякс в действии), и нашёл такое:
авторФормы могут содержать многие компоненты, типичные для пользова-
тельского интерфейса обычных приложений, а именно: поля редактирования,
флажки и переключатели опций, раскрывающиеся списки и пр. Однако неко-
торые из компонентов в составе форм не поддерживаются. Так, например,
в формах не предусмотрены деревья и таблицы.
А что это было в моём коде, который приведён выше? Волшебное заклинание? Или таблицы вставлять в формы можно, но не каждый браузер поймёт?
...
Рейтинг: 0 / 0
21.07.2008, 15:12
| Ответить | Цитировать | Написать  
Таблицы
    #35443254
apapacy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
apapacy
Участник
Автор имел в виду таблицы в которые можно вводить данные. т к механизм форм предназначет для CGI интерфейса
...
Рейтинг: 0 / 0
21.07.2008, 20:24
| Ответить | Цитировать | Написать  
Таблицы
    #35443545
Фотография XDiaBLo
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
XDiaBLo
Участник
apapacyАвтор имел в виду таблицы в которые можно вводить данные. т к механизм форм предназначет для CGI интерфейса
Ага, теперь понятно, а то такие странные заявления... В общем немного неточная формулировка в книге.
...
Рейтинг: 0 / 0
22.07.2008, 06:52
| Ответить | Цитировать | Написать  
16 сообщений из 16, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Таблицы
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&tid=1456156]:
 0ms
get settings:
 6ms
get forum list:
 10ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 50ms
get topic data:
 6ms
get forum data:
 1ms
get page messages:
 31ms
get tp. blocked users:
 1ms
others: 207ms
total:  316ms
созд. / загр.: 316ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]