Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Таблица с не полным текстом / 8 сообщений из 8, страница 1 из 1
29.05.2014, 15:47
    #38655997
akimov_aleks
akimov_aleks
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Таблица с не полным текстом
Добрый день подскажите плиз в какую сторону капать чтоб реализовать задачу.
есть таблица с ней длинный текст и получается не красивая. как сделать чтоб текст был коротким а при наведении мышки или щелчке отображалось полный текст
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2014, 16:46
    #38656127
carrotik
carrotik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Таблица с не полным текстом
akimov_aleksДобрый день подскажите плиз в какую сторону капать чтоб реализовать задачу.
есть таблица с ней длинный текст и получается не красивая. как сделать чтоб текст был коротким а при наведении мышки или щелчке отображалось полный текст

...например:
http://getbootstrap.com/javascript/#popovers
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.05.2014, 12:19
    #38656885
akimov_aleks
akimov_aleks
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Таблица с не полным текстом
возможно ли скрыть часть текста ячейки
допустим текст (Добро пожаловать в форум) а нужно чтоб отображалось в ячейки (Добро )
при наведении мышки видим (Добро пожаловать в форум)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.05.2014, 14:26
    #38657070
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Таблица с не полным текстом
akimov_aleks,

как вариант, в каждую ячейку - небольшой ширины div , со свойством overflow: hidden Тогда в ячейке будет отображаться короткий текст.
Ну а при наведении/щелчке мышью показывать полный текст.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.05.2014, 15:34
    #38657701
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Таблица с не полным текстом
akimov_aleks,
 
так пойдет?   (подсказка всплывает, если текст не помещается в ячейке)
Код: html
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.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
<!DOCTYPE html>
<html>
<head> <meta charset="windows-1251">
<style>
* {font:10pt arial,sans-serif;}
table {border-collapse:collapse;}
#data td,th {
	border:1px solid #c0c0c0;
	padding:0;
}
th {
	background:#4682B4;
	color:#fff;
	font-weight:700;
	padding:4px;
}
#data td div {
	width:105px;
	height:17px;
	padding:2px 4px;
	word-break:break-all;
	overflow:hidden;
}
#MyHint {
	background:#FAFAD2;
	height:17px;
	padding:2px 4px;
	border:1px solid #c0c0c0;
	position:absolute;
	display:none;
}
</style>
</head>
<body>
<table id="data">
	<tr> <th>The Asylum</th> <th>20th Century Fox</th> <th>Просто так</th> </tr>
	<tr> <td><div>Король затерянного мира</div></td> <td><div>Star Wars (части 1-6)</div></td> <td><div>Оперативно-тактическое решение</div></td> </tr>
	<tr> <td><div>Терминаторы</div></td> <td><div>Аватар</div></td> <td><div>Выполнение поставленных боевых задач</div></td></tr>
	<tr> <td><div>Угроза из прошлого</div></td> <td><div>Люди икс</div></td> <td><div>Защитить исследовательский центр Парения</div></td> </tr>
	<tr> <td><div>Андроид-полицейский</div></td> <td><div>Хищник</div></td> <td><div>Освободить комплекс по добыче воды</div></td> </tr>
	<tr> <td><div>Помпеи: апокалипсис</div></td> <td><div>Секретные материалы</div></td> <td><div>Dark Reign - 2</div></td> </tr>
</table>
<div id="MyHint"></div>
</body>

<script>
var tbl = document.getElementById('data');
var MyHint = document.getElementById('MyHint');

tbl.onmouseover = function(e) {
	e = e || event;
	var el = e.target || e.srcElement;
	if (el.tagName.toUpperCase() != 'DIV') {return;}

	var box = el.getBoundingClientRect();
	MyHint.style.left = box.left - 1 + 'px';
	MyHint.style.top = box.top - 1 + 'px';
	MyHint.innerHTML = el.innerHTML;
	MyHint.style.display = 'block';
	if (MyHint.offsetWidth < el.offsetWidth) {MyHint.style.display = 'none';}
}

MyHint.onmouseout = function(e) {
	e = e || event;
	var el = e.target || e.srcElement;
	MyHint.style.display = 'none';
}
</script>
</html>

...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.05.2014, 22:20
    #38657814
akimov_aleks
akimov_aleks
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Таблица с не полным текстом
user89akimov_aleks,
 
так пойдет?   (подсказка всплывает, если текст не помещается в ячейке)
Код: html
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.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
<!DOCTYPE html>
<html>
<head> <meta charset="windows-1251">
<style>
* {font:10pt arial,sans-serif;}
table {border-collapse:collapse;}
#data td,th {
	border:1px solid #c0c0c0;
	padding:0;
}
th {
	background:#4682B4;
	color:#fff;
	font-weight:700;
	padding:4px;
}
#data td div {
	width:105px;
	height:17px;
	padding:2px 4px;
	word-break:break-all;
	overflow:hidden;
}
#MyHint {
	background:#FAFAD2;
	height:17px;
	padding:2px 4px;
	border:1px solid #c0c0c0;
	position:absolute;
	display:none;
}
</style>
</head>
<body>
<table id="data">
	<tr> <th>The Asylum</th> <th>20th Century Fox</th> <th>Просто так</th> </tr>
	<tr> <td><div>Король затерянного мира</div></td> <td><div>Star Wars (части 1-6)</div></td> <td><div>Оперативно-тактическое решение</div></td> </tr>
	<tr> <td><div>Терминаторы</div></td> <td><div>Аватар</div></td> <td><div>Выполнение поставленных боевых задач</div></td></tr>
	<tr> <td><div>Угроза из прошлого</div></td> <td><div>Люди икс</div></td> <td><div>Защитить исследовательский центр Парения</div></td> </tr>
	<tr> <td><div>Андроид-полицейский</div></td> <td><div>Хищник</div></td> <td><div>Освободить комплекс по добыче воды</div></td> </tr>
	<tr> <td><div>Помпеи: апокалипсис</div></td> <td><div>Секретные материалы</div></td> <td><div>Dark Reign - 2</div></td> </tr>
</table>
<div id="MyHint"></div>
</body>

<script>
var tbl = document.getElementById('data');
var MyHint = document.getElementById('MyHint');

tbl.onmouseover = function(e) {
	e = e || event;
	var el = e.target || e.srcElement;
	if (el.tagName.toUpperCase() != 'DIV') {return;}

	var box = el.getBoundingClientRect();
	MyHint.style.left = box.left - 1 + 'px';
	MyHint.style.top = box.top - 1 + 'px';
	MyHint.innerHTML = el.innerHTML;
	MyHint.style.display = 'block';
	if (MyHint.offsetWidth < el.offsetWidth) {MyHint.style.display = 'none';}
}

MyHint.onmouseout = function(e) {
	e = e || event;
	var el = e.target || e.srcElement;
	MyHint.style.display = 'none';
}
</script>
</html>




огромное вам СПАСИБО .
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2014, 22:17
    #38658156
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Таблица с не полным текстом
akimov_aleks,

кстати, функцию MyHint.onmouseout можно сократить до одной строки, и она будет выглядеть так:
Код: javascript
1.
2.
3.
MyHint.onmouseout = function(e) {
	MyHint.style.display = 'none';
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.04.2015, 08:11
    #38939752
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Таблица с не полным текстом
 
Более универсальный вариант
Код: html
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.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
<!DOCTYPE html>
<html>
<head> <meta charset="windows-1251">
<title>Hint подсказка всплывает, если текст не помещается в ячейке</title>
<style>
* {font:10pt arial,sans-serif;}
table {border-collapse:collapse;}
#data td,th {
	border:1px solid #c0c0c0;
	padding:2px 4px;
}
th {
	background:#4682B4;
	color:#fff;
	font-weight:700;
}
#data td a {
	display:block;
	max-width:105px;
	white-space:nowrap;
	overflow:hidden;
}
#MyHint {
	background:#FAFAD2;
	border:1px solid #c0c0c0;
	position:absolute;
	display:none;
}
</style>
</head>
<body onload="ShowLongText('data')">
<table id="data">
	<tr> <th>The Asylum</th> <th>20th Century Fox</th> <th>Просто так</th> </tr>
	<tr> <td><a>Король затерянного мира</a></td> <td><a>Star Wars (части 1-6)</a></td> <td><a>Оперативно-тактическое решение</a></td> </tr>
	<tr> <td><a>Терминаторы</a></td> <td><a>Аватар</a></td> <td><a>Выполнение поставленных боевых задач</a></td></tr>
	<tr> <td><a>Угроза из прошлого</a></td> <td><a>Люди икс</a></td> <td><a>Защитить исследовательский центр Парения</a></td> </tr>
	<tr> <td><a>Андроид-полицейский</a></td> <td><a>Хищник</a></td> <td><a>Освободить комплекс по добыче воды</a></td> </tr>
	<tr> <td><a>Помпеи: апокалипсис</a></td> <td><a>Секретные материалы</a></td> <td><a>Dark Reign - 2</a></td> </tr>
</table>
<div id="MyHint"></div>

<script>
function gid(idx) {return document.getElementById(idx);}

function ShowLongText(idx) {
	var tbl = gid(idx);
	var MyHint = gid('MyHint');

	tbl.onmouseover = function(e) {
		e = e || event;
		var el = e.target || e.srcElement;
		if (el.tagName.toUpperCase() != 'A') {return;}

		var st = getComputedStyle(el.parentNode);
		MyHint.style.paddingTop = st.paddingTop; MyHint.style.paddingBottom = st.paddingBottom;
		MyHint.style.paddingLeft = st.paddingLeft; MyHint.style.paddingRight = st.paddingRight;
		var box = el.getBoundingClientRect();
		MyHint.style.left = box.left - parseInt(st.paddingLeft) - 1 + 'px';
		MyHint.style.top = box.top - parseInt(st.paddingTop) - 1 + 'px';
		MyHint.innerHTML = el.innerHTML;
		MyHint.style.display = 'block';
		if (MyHint.offsetWidth < el.offsetWidth) {MyHint.style.display = 'none';}
	}
	MyHint.onmouseout = function(e) {MyHint.style.display = 'none';}
}
</script>
</body>
</html>

...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Таблица с не полным текстом / 8 сообщений из 8, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 432ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1446080]:
 0ms
get settings:
 5ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 146ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 41ms
get tp. blocked users:
 1ms
others: 206ms
total:  432ms
x
x
Закрыть


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