| |
|
|
| | Подскажите люди добрые .... в чем может быть проблема. Скорее всего — понимаю что в голове — но всеже без подсказки уже не могу
Вобщем пытаюсь скрыть ячейки ... что то типа display: none .... нужно чтобы крос-браузерно, как следствие для FF (а здесь вопрос именно в нем) смотрю в стороно visibility как и обещают многие доки.
Вот он (ниже) небольшой пример кода(сама задача несколько обширнее), который почему то отказывается работать в FF 2.0.0.11
Вобщем результат его работы (при попытке скрыть ячейки) в этом браузере — ячейки перестают отображаться, однако выделенное под них ранее пространство остается не поделенным между соседними ячейками (так как мне кажется логичным этот результат).
Вот вобщем то и вопрос — почему и как бороться?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<table width="70%" border="1">
<tr>
<td>
1
</td>
<td id="id1">
2
</td>
<td id="id2">
3
</td>
<td>
4
</td>
</tr>
</table>
<script type="text/javascript">
function hide() {
document.getElementById('id1').style.visibility = 'collapse';
document.getElementById('id2').style.visibility = 'collapse';
}
function show() {
document.getElementById('id1').style.visibility = 'visible';
document.getElementById('id2').style.visibility = 'visible';
}
</script>
<input type="button" value="1" onclick="hide()" />
<input type="button" value="2" onclick="show()" />
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: fran
(29.01.2008 в 23:31)
| | | 1. значения 'collapse' у свойства visibility не бывает, ни в одном браузере.
Я знаю, что в стандартах W3C таковое значение имеется - http://www.w3.org/TR/1998/REC-CSS2-19980512/visufx.html#visibility - но оно НИГДЕ пока не реализовано.
2. чтобы ячейки 1 и 4 как раз-таки поделили пространство, отведенное под ячейки 2 и 3, вам надо использовать свойство display, т.е. переписать обе функции так (и это будет работать во всех современных браузерах):
<script>
function hide() {
document.getElementById('id1').style.display = 'none';
document.getElementById('id2').style.display = 'none';
}
function show() {
document.getElementById('id1').style.display = 'block';
document.getElementById('id2').style.display = 'block';
}
</script>
|
И на будущее:
visibility: hidden; ---- объект занимает свое место, но не виден (его геометрические размеры - offsetWidth и offsetHeight - не изменились, просто он как бы стал прозрачным)
display: none; ---- объект изъяли со страницы (он не занимает места, его геометрические размеры - offsetWidth и offsetHeight - равны нулю) | |
| |
|
|
| |
|
|
| |
для: CNT
(29.01.2008 в 23:53)
| | | Доброго времени суток, CNT
по порядку ...
1. значение 'collapse' у свойства visibility бывает ... об этом написано не мало (другое дело, что в этом "не мало" - я не смог найти ответ на свой вопрос :) ). Оно бывает например в браузере FireFox (хорошо известный, а главное используемый (сейчас говорю о западных странах) браузер, о котором и идет речь в моем вопросе). На вскидку (из гугл) ссылка на описание со ссылками на поддерживающие это свойство браузеры - http://htmlbook.ru/css/visibility.html .
О реальном примере .... вот ссылка http://www.benmeadowcroft.com/me/archive/2003/augustfiles/collapse.html ... люди значением этого свойства пользовались еще в 2003 году (когда я лично вообще еще о html/css не знал :)) . На примере речь идет о TR-тегах ... о TD я не нашел - по этому и пошел на форумы.
2. я думаю и здесь немного не верно ... со свойством display (а тем более значением block, браузер FireFox работает не так как вы того ждете например от IE). Достаточно проверить этот пример и вы увидете. А речь в моем вопросе идет напомню именно о FireFox. .... FireFox отношу к одному из современных браузеров (и не только я, об этом тоже не мало написано).
....
А "на будущее" я уже знаю :)
....
Между тем - спасибо за участие обсуждение и начало возможной дискуссии. Однако вопрос все еще актуален. Пожалуйста помогите ;) | |
| |
|
|
| |
|
|
| |
для: fran
(30.01.2008 в 00:26)
| | | 1. для ячеек - не бывает. Ни в одном из браузеров. Читайте http://www.richinstyle.com/guides/tables2.html#collapse
2. в FF со стилем display: none работает нормально (относительно нормально).
Но если напишете для ячейки 1 и 4 ещё б_о_льший бред, чем написан сейчас, то, разумеется, работать будет совсем плохо.
Почему для ячеек 1&4 style="width: 50%"?
Почему не написали style="width: 40000%"?
Какую ширину вы оставили для ячеек 2 и 3? Ничего не оставили? :-)
Пропишите нормальные стили (чтобы они в сумме всех 4-х ячеек дали 100%), тогда и говорите о нормальной/ненормальной работе. Или хотя бы ничего не пишите. | |
| |
|
|
