С помощью собственных написанных функций на языке JavaScript можно определить ширину и высоту окна браузера в пикселах и точно по центру поместить необходимый слой. Хотя использование скриптов в этом случае достаточно универсально, этот метод сопряжен с определенными нюансами. Во-первых, приходится постоянно отслеживать изменение размеров окна или через определенный промежуток времени центрировать слой, что, естественно, повышает нагрузку на браузер. Во-вторых, включение скриптов в код документа увеличивает его объем и снижает производительность сайта. Несмотря на эти недочеты, применение скриптов для выравнивания по центру удачно использовать, когда ширина и высота слоя жестко задана в пикселах, например, в случае добавления flash-ролика или картинки.
Для определения ширины и высоты рабочей области браузера используются методы document.body.clientWidth и document.body.clientHeight. Эти методы работают в браузерах Internet Explorer 5, Opera 6, Netscape 6 и выше. Если вы по какой-либо причине желаете включить поддержку браузера Netscape 4.x, то следует использовать методы window.innerWidth и window.innerHeight. Ниже в примерах определение браузера не делается, поэтому вам придется самостоятельно подправить код, чтобы он работал в Netscape 4.
Вначале создаем слой с именем xyz шириной 300 и высотой 200 пикселов. Размеры этого слоя, а также параметры оформления определяются с помощью стилей. Затем пишем свою функцию putLayer(), которая размещает слой xyz точно по центру рабочей области окна (пример 1). Чтобы слой всегда был выровнен по центру, при изменении размера окна браузера, следует использовать функцию setTimeout. Она будет рекурсивно запускать нашу функцию putLayer() через определенный промежуток времени.
Пример 1. Выравнивание слоя по центру#xyz P {
padding: 10px
}
#title {
background: #666666;
padding: 7px;
text-align: right
}
#title A {
color: white;
font-size: 90%;
font-weight: bold
}
</style>
<script language="JavaScript">
function closeWindow() {
document.getElementById("xyz").style.visibility = "hidden"
}
function putLayer() {
leftLayer = (document.body.clientWidth - 300)/2
topLater = (document.body.clientHeight - 200)/2
document.getElementById("xyz").style.left = leftLayer
document.getElementById("xyz").style.top = topLayer
setTimeout("putLayer()", 1000) // *
}
</script>
</head>
<body onLoad="putLayer()">
<div id=xyz>
<div id=title><a href="javascript: closeWindow()">Закрыть
окно [X]</a></div>
<p>Содержание...</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Идентификаторы leftLayer и topLayer хранят координаты слоя, при которых он будет размещаться по центру. Они вычисляются на основе ширины и высоты рабочей области браузера, из которой вычитается ширина и высота слоя (300 и 200 пикселов соответственно) и делится пополам.
Рекурсивный вызов функции putLayer происходит каждые 1000 миллисекунд (второй аргумент в вызове функции setTimeout). Другими словами, каждую секунду. Вы можете изменить это значение в меньшую сторону, чтобы задержки при смещении слоя были минимальны.
Обратите внимание на конструкцию javascript: closeWindow(). Она предназначена для вызова функции closeWindow(), которая прячет наш слой. Отобразить его по новой можно только обновив веб-страницу или добавив функцию, показывающую слой. Но это уже проделайте самостоятельно.
Использование функции setTimeout приводит к возрастанию нагрузки на браузер и понижению его производительности. К тому же возникает заметная заминка при выполнении скрипта. Выход из положения — вообще отказаться от использования setTimeout и вызывать требуемую функцию при наступлении определенного события. В данном случае подойдет событие onResize, которое возникает при изменении размеров окна браузера. Тогда строку в примере 1 содержащую функцию setTimeout следует удалить, а тег BODY заменить на следующий <body onLoad="putLayer()" onResize="putLayer()">, как показано в примере 2.
Пример 2. Использование события onResizefunction closeWindow() {
document.getElementById("xyz").style.visibility = "hidden"
}
function putLayer() {
leftLayer = (document.body.clientWidth - 300)/2
topLater = (document.body.clientHeight - 200)/2
document.getElementById("xyz").style.left = leftLayer
document.getElementById("xyz").style.top = topLayer
}
</script>
</head>
Примеры 1 и 2 различаются только параметрами тега BODY и строкой с функцией setTimeot.