Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Код работает корректно во всех браузерах кроме IE8 (https://javascript.ru/forum/events/14457-kod-rabotaet-korrektno-vo-vsekh-brauzerakh-krome-ie8.html)

Yamasa 17.01.2011 18:55

Код работает корректно во всех браузерах кроме IE8
 
Данный код работает во всех браузерах, но не хочет работать в IE8. Где ошибка, что я не учел ? Спасибо.

<script language="javascript">
function showProcess(id){
 	document.getElementById('Description').innerHTML = document.getElementById(id).innerHTML;
	document.getElementById('Description').style.border = 'dashed #d5d5d5 1px';
	document.getElementById('Description').style.backgroundColor = '#f9f9f9';
	document.getElementById('Description').style.padding = '10px 15px 10px 15px';
	document.getElementById('Description').style.lineHeight = '1.4';
	document.getElementById('Process').style.position = 'absolute';
	document.getElementById('Process').style.overflow = 'hidden';
	document.getElementById('Process').style.fontSize = '12px';
	document.getElementById('Process').style.textAlign = 'justify';
	document.getElementById('Process').style.background = '#fff';
	document.getElementById('Process').style.width = '400px';
	document.getElementById('Process').style.zIndex = '100';
	document.getElementById('Process').style.padding = '50px 50px 50px 50px';
	document.getElementById('Process').style.posLeft = window.pageXOffset + window.innerWidth/2 - 400/2;
	document.getElementById('Process').style.posTop = window.pageYOffset + window.innerHeight/2 - 300/2;
	document.getElementById('Process').style.display ='block';	
	return false;
}
</script>

------------

<div id="Process" style="display:none;">
		<div id="Description"></div>
    	<p><div align="right"><button type="button" value="закрыть" onclick="hideProcess()" id="CloseBtn">Закрыть</button></div>       
</div>


<a href="#" onclick="showProcess(41)">Process 41</a>
<div style="display:none" id="41">Description</div>

Vulkan 17.01.2011 19:20

IE с window.pageY/XOffset window.innerHeight/Width работает некорректно. И кстати id элементам назначайте те, которые начинаются не с цифры, так делать нельзя.
Вот корректный вариант:
<script language="javascript">
function getClientWidth()
{
  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
}

function getClientHeight()
{
  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}

function showProcess(id){

 	document.getElementById('Description').innerHTML = document.getElementById(id).innerHTML;
	document.getElementById('Description').style.border = 'dashed #d5d5d5 1px';
	document.getElementById('Description').style.backgroundColor = '#f9f9f9';
	document.getElementById('Description').style.padding = '10px 15px 10px 15px';
	document.getElementById('Description').style.lineHeight = '1.4';
	document.getElementById('Process').style.position = 'absolute';
	document.getElementById('Process').style.overflow = 'hidden';
	document.getElementById('Process').style.fontSize = '12px';
	document.getElementById('Process').style.textAlign = 'justify';
	document.getElementById('Process').style.background = '#fff';
	document.getElementById('Process').style.width = '400px';
	document.getElementById('Process').style.zIndex = '100';
	document.getElementById('Process').style.padding = '50px 50px 50px 50px';
	document.getElementById('Process').style.posLeft = document.body.scrollLeft + getClientWidth()/2 - 400/2;
	document.getElementById('Process').style.posTop = document.body.scrollTop + getClientHeight()/2 - 300/2;
	document.getElementById('Process').style.display ='block';	
	return false;
}
</script>

<body>
------------

<div id="Process" style="display:none;">
		<div id="Description"></div>
    	<p><div align="right"><button type="button" value="закрыть" onclick="hideProcess()" id="CloseBtn">Закрыть</button></div>       
</div>


<a href="#" onclick="showProcess(41)">Process 41</a>
<div style="display:none" id="41">Description</div>
</body>

Yamasa 17.01.2011 19:39

Спасибо! Все работает.

Только вот наблюдается такой эффект. В IE не смотря на то, что документ проскролили вниз, слой все равно открывается фиксировано, а в других браузерах слой всегда открывается по центру окна. В IE на это можно как-то повлиять?

Vulkan 17.01.2011 19:51

Попробуйте style.position = 'fixed' выставить

Yamasa 17.01.2011 20:02

Работает. Еще раз спасибо :)

ksa 17.01.2011 21:44

Цитата:

Сообщение от Vulkan
И кстати id элементам назначайте те, которые начинаются не с цифры, так делать нельзя.

Тут не разрешают такое говорить... :)
http://javascript.ru/forum/events/13...a-s-cifry.html

Vulkan 18.01.2011 07:40

Не видел раньше этой темы, приму к сведению =)


Часовой пояс GMT +3, время: 14:12.