Форум

spbspidir · #1 (**permalink**) 12.10.2010, 00:31

Выравнивает только по ширине, по высоте ни как...Ошибок не находит,
Обозреватель IE-8.

function winResize(){
    var contObj=document.getElementById("photo");
	var bodyObj=document.body;
	var contWidth=contObj.offsetWidth;
	var contHeight=contObj.offsetHeight;
	var bodyWidth=bodyObj.clientWidth;
	var bodyHeight=bodyObj.clientHeight;
	contObj.style.left=(bodyWidth-contWidth)/2+"px";
	contObj.style.top=(bodyHeight-contHeight)/2+"px";
}
window.onresize=winResize;
winResize();

SilentImp · #2 (**permalink**) 12.10.2010, 01:55

Может быть имеет смысл решить эту задачу через CSS?

Кстати, проверь, определены ли значения по высоте. Раз не выравнивает, то либо у photo позиционирование static, либо contHeight/bodyHeight undefined.

spbspidir · #3 (**permalink**) 12.10.2010, 02:03

Для меня непонятное решение проблемы...

убрал строку в начале документа
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"
И всё заработало...
Может кто объяснит

monolithed · #4 (**permalink**) 12.10.2010, 07:43

Чтобы понять причину нужно привести HTML-код тоже

SilentImp · #5 (**permalink**) 12.10.2010, 11:29

Вы убрали DOCTYPE и браузер перешел в квирк-мод.
Это не есть гуд. Почему? Прочтите зачем нужен DOCTYPE и почему квирк-мод это плохо.

http://webmascon.com/topics/coding/25a.asp

spbspidir · #6 (**permalink**) 12.10.2010, 19:34

Так вот, сценарий со строкой DOCTYPE работает не правильно, не выравнивает по высоте!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Документ без названия</title>
<style>
.photo {
	height: 100px;
	width: 100px;
	position: absolute;
	left: 50px;
	top: 50px;
	background-color: #000;
}
</style><script>
function winResize(){
    var contObj=document.getElementById("photo");
	var bodyObj=document.body;
	var contWidth=contObj.offsetWidth;
	var contHeight=contObj.offsetHeight;
	var bodyWidth=bodyObj.clientWidth;
	var bodyHeight=bodyObj.clientHeight;
	contObj.style.left=(bodyWidth-contWidth)/2+"px";
	contObj.style.top=(bodyHeight-contHeight)/2+"px";
}
</script></head>
<div id="photo" class="photo">&nbsp;</div>
<script>
  window.onresize=winResize;
  winResize();
</script>
<body>
</body>
</html>

рони · #7 (**permalink**) 12.10.2010, 23:00

spbspidir,
Размеры окна браузера
)))

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Документ без названия</title>
<style>
.photo {
	height: 100px;
	width: 100px;
	position: absolute;
	left: 50px;
	top: 50px;
	background-color: #000;
}
</style>
<script>
function winResize(){
    var contObj=document.getElementById("photo");
	var bodyObj=document.documentElement;
	var contWidth=contObj.offsetWidth;
	var contHeight=contObj.offsetHeight;
	var bodyWidth=bodyObj.clientWidth;
	var bodyHeight=bodyObj.clientHeight;
	contObj.style.left=(bodyWidth-contWidth)/2+"px";
	contObj.style.top=(bodyHeight-contHeight)/2+"px";
}
</script></head>
<body>
<div id="photo" class="photo">&nbsp;</div>
<script>
  window.onresize=winResize;
  winResize();
</script>
</body>
</html>

SilentImp · #8 (**permalink**) 13.10.2010, 03:13

spbspidir ... есть чудесная штука — w3c html validator (http://validator.w3.org/).
Она учит не пихать div и script куда не надо. Как .photo вообще позиционировать относительно body, если оно не является дочерним элементом и расположено там, где его быть не может.

Кроме того если известен размер изображения то с какого перепугу вообще скрипт использовать? Даже если не известно, то задачу можно решить с помощью pure css.

Стиль исправь на нижеприведенный, скрипт убери вообще, div помести ВНУТРЬ body.
.photo {
height: 100px;
width: 100px;
position: absolute;
left: 50%;
top: 50%;
margin:-50px 0 0 -50px;
background-color: #000;
}

Ну еще можешь html,body height/min-height:100%; добавить.
Это для случая когда ты знаешь размер картинки.
А если не знаешь, то:
http://cssing.org.ua/2007/04/26/anot...valign-method/
http://habrahabr.ru/tag/вертикальное%20выравнивани� �/
http://www.jakpsatweb.cz/css/css-ver...-solution.html
и еще 100500 статей.

Не думаю, что тебе для этого нужен скрипт.

Форум

Справочник

Discord чат

Курсы javascript