Кроссбраузерность javascript

79 сообщений

#16 лет назад

Приветствую всех и прошу помощи в следующем:
Имеется



<!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"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 

<title></title> 


<style type="text/css"> 

#invisibility {

	background: #FFFFCC;

	display: none;

}

</style> 


<script type="text/javascript" language="javascript"> 

function checkInvis ()

{

	if (document.form1.check.checked == true)

	{

		document.getElementById('invisibility').style.display = 'table-row';

	}

	else

	{

		document.getElementById('invisibility').style.display = 'none';

	}

}

</script> 


</head> 

<body> 

<form name="form1" action="" method=""> 

<table height=100% id="list"> 

<tr> 

<td>Ячейка 1</td> 

<td><input type="text" /></td> 

</tr> 

<tr> 

<td>Ячейка 2</td> 

<td><input type="text" /></td> 

</tr> 

 <tr> 

<td>Ячейка 3</td> 

<td><input type="text" /></td> 

</tr> 

<tr> 

<td>Ячейка 4</td> 

<td><input type="checkbox" name="check" onclick="checkInvis();" />5 ячейка вкл./выкл.</td> 

</tr> 

<tr id="invisibility"> 

<td>Ячейка 5</td> 

<td><input type="text" /></td> 

</tr> 

</table> 

</form> 

</body> 

</html>

Тестировал в Firefox 3.0.5 и Google Hrome - работает без проблем но не работает в IE.
Пробовал менять

document.getElementById('invisibility').style.display = 'table-row';

на

document.getElementById('invisibility').style.display = 'block';

Работает в IE, но некорректно ведет себя в Firefox 3.0.5 и Google Hrome.
Может кто-то сталкивался? Заранее благодарен.

2195 сообщений

#16 лет назад

Ну а в чем проблема. IE не знает о существовании table-row. Так и меняйте display браузерозависимо.
Я бы описал поведение невидимого элемента в css (отдельным классом, с block для IE в conditional comments) и присваивал/убирал дополнительный класс с display:none

3195 сообщений

#16 лет назад

Или можно подключить тот же jquery и больше не думать о кроссбраузерности.

1351 сообщение

#16 лет назад

Может попробуете прятать через



Visiblety:hidden; 

display:inline;

? 0_о

я так сделал, вроде работало во всех браузерах нормально.



function chmenu()

{

  var vm = document.getElementById("menu");    // Привязываем переменную vm к id="menu"

  if(vm.style.visibility == "hidden") vm.style.visibility = "visible", vm.style.display = "none";

  else vm.style.visibility = "hidden", vm.style.display = "inline";

}

188 сообщений

#16 лет назад

А может через display:block? Вконтакте вроде ж на нем сделано.

1351 сообщение

#16 лет назад

Цитата ("Dronni_3D"):

А может через display:block? Вконтакте вроде ж на нем сделано.

Почему display = "inline" ?

Может я забыл, если указать display:block; объект скроется, но будет продолжать занимать пространство на странице.
При display = "inline" , он сжимается в строку и у вас не будет проблем с пустым местом под страницей и прочей фигни. Мне кажется этот метод "чище"

2195 сообщений

#16 лет назад

TomNorman
Вы не понимаете что пишите. Есть разница между инлайн и блочными элементами. <tr> в ie - это блочный элемент.
Также есть разница между display:none и visibility:hidden. А делать visibilty:hidden и display:inline - это что-то совсем странное.

Выше уже есть два совета, мой и AlekartRu, оба уже закрывают проблему, но мне по случаю подсказали универсальное решение:

Если строка таблицы скрыта с display:none, то восстановить ее можно, не задавая браузерозависимых значений display, примерно так:
document.getElementById('invisibility'

.style.display='';
Это восстановит значение display "по-умолчанию", то есть block для IE и table-row для остальных браузеров

1351 сообщение

#16 лет назад

Ух ты !

спасибо буду знать ))))

79 сообщений

#16 лет назад

document.getElementById('invisibility').style.display='';

Не работает.

1410 сообщений

#16 лет назад

Цитата ("php"):

document.getElementById('invisibility').style.display='';

Не работает.

Не верю (с)

Вот мой код - и он работает. Принцип используется тот же самый, что и подсказал Sir_Michael.

/* Свертка блоков + посадка куки */

function changeView(id, linkid, color) {


  var params = '&blockid='+id;


  if ($(id).style.display != 'none') {


    $(id).style.display = 'none';


    $(linkid).className=color+'-block-hdl2-collapsed';


    new Ajax.Request('/ajaxSaveCookie/', {method: 'post',parameters:params, onFailure:errFunc});

  }

  else {


    $(linkid).className=color+'-block-hdl2';


    $(id).style.display = '';


    new Ajax.Request('/ajaxSuspendCookie/', {method: 'post',parameters:params, onFailure:errFunc});

  }

}