Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Таблицы / 16 сообщений из 16, страница 1 из 1
16.07.2008, 15:27
    #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:35
    #35434130
IDVsbruck
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Таблицы
Резиновая таблица в div'е со стилем "overflow: auto;".
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.07.2008, 15:44
    #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:51
    #35434195
XDiaBLo
XDiaBLo
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Таблицы
illion XDiaBLoВозможно ли сделать это внутри таблицы?

Внутри таблицы такое сделать возможно, но не кроссбраузерно (повесить overflow на tbody таблицы, кнопки поместить в tfoot). Поэтому однозначно кнопки из таблицы нужно вынести, а таблицу заключить в div с overflow и height (либо делать вложенные таблицы, если важен табличный макет верстки).
Да по мне лишь бы фреймов не было, я потом Аякс туда впаяю чтобы в элементе <tbody id="chatWindow"> текст добавлять. Пока имитация, т.к. серверную часть ещё не написал. Я программист, а не вебмастер, так что html и javascript с Аяксом изучаю параллельно с созданием странички, поэтому рад любым советам.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.07.2008, 15:57
    #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
| Ответить | Цитировать | Написать  
17.07.2008, 06:59
    #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, 07:23
    #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:38
    #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, 09:05
    #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:33
    #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:47
    #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, 10:10
    #35435731
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Таблицы
Щас токошто запустил своё приложение в опере с scrollIntoView - там как раз такая же ситуация со строкой таблицы.
Опера 9.24 - прекрасно работает. Только, поскольку я не знал про параметр true , который - писал без него.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.07.2008, 15:12
    #35442627
XDiaBLo
XDiaBLo
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Таблицы
Хмм, читаю книгу по Аяксу (Аякс в действии), и нашёл такое:
авторФормы могут содержать многие компоненты, типичные для пользова-
тельского интерфейса обычных приложений, а именно: поля редактирования,
флажки и переключатели опций, раскрывающиеся списки и пр. Однако неко-
торые из компонентов в составе форм не поддерживаются. Так, например,
в формах не предусмотрены деревья и таблицы.
А что это было в моём коде, который приведён выше? Волшебное заклинание? Или таблицы вставлять в формы можно, но не каждый браузер поймёт?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.07.2008, 20:24
    #35443254
apapacy
apapacy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Таблицы
Автор имел в виду таблицы в которые можно вводить данные. т к механизм форм предназначет для CGI интерфейса
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2008, 06:52
    #35443545
XDiaBLo
XDiaBLo
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Таблицы
apapacyАвтор имел в виду таблицы в которые можно вводить данные. т к механизм форм предназначет для CGI интерфейса
Ага, теперь понятно, а то такие странные заявления... В общем немного неточная формулировка в книге.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Таблицы / 16 сообщений из 16, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 341ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1456156]:
 0ms
get settings:
 5ms
get forum list:
 14ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 65ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 31ms
get tp. blocked users:
 1ms
others: 212ms
total:  341ms
x
x
Закрыть


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