Определение ширины браузера

Для некоторых задач требуется размещать слой по правому краю окна браузера. Но, поскольку, положение слоя задается в пикселах, для его размещения требуется знать, сколько же именно пикселов занимает окно браузера.

Для определения ширины и высоты рабочей области браузерами используется разный подход. Internet Explorer и Opera получают значение ширины через метод document.body.clientWidth, а Netscape – через window.innerWidth. Высота определяется аналогично, только Width меняется на Height. В конечном итоге, функции, написанные на JavaScript, будут иметь вид, как показано в примере 1.

Пример 1. Функции для определения высоты и ширины

// Определение браузера
IE = (document.all); // Internet Explorer?
NC = (document.layers); // Netscape?
Opera = (document.getElementById); // Opera?

function getHeight() { // Получаем высоту рабочей области браузера
if (IE || Opera) send = document.body.clientHeight;
if (NC) send = window.innerHeight;
return send;
}

function getWidth() { // Получаем ширину рабочей области браузера
if (IE || Opera) send = document.body.clientWidth;
if (NC) send = window.innerWidth;
return send;
}

</script>

Чтобы использовать приведенные функции, вначале нужно создать слой с абсолютным позиционированием.

Пример 2. Создание слоя

<div id=xyz style="position: absolute; top: 0px; width: 100px; z-index: 1">
<table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=#000000 cellspacing=0>
<tr>
<td>Содержание</td>
</table>
</div>

Положение слоя определяется параметром z-index. Чтобы слой располагался поверх остального текста, его значение следует задавать положительным числом больше нуля. Если слой нужно размещать ниже текста – используется отрицательное значение.

Для указания положения слоя в правом верхнем углу, напишем функцию putLayer.

Пример 3. Задание положения слоя в правом углу браузера

function putLayer() {
widthBrowser = getWidth() - 100;
if(IE) eval('document.all["xyz"].style.left = widthBrowser');
if(NC) eval('document.layers["xyz"].left = widthBrowser');
if(Opera) eval('document.getElementById("xyz").style.left = widthBrowser');
setTimeout('putLayer()', 1000);
}

Поскольку положение слоя отсчитывается от левого верхнего угла, следует от ширины рабочей области отнять ширину слоя (в примере – 100 пикселей). Если слой будет размещаться в нижнем углу окна браузера, то же самое следует проделать и с высотой.

Чтобы заданный слой всегда оставался в указанном месте и не менял свое положение при изменении размера окна, используется функция setTimeout, которая каждые 1000 миллисекунд (или 1 секунда по другому) восстанавливает положение слоя.

Вызывать функцию приведенную в примере 3 можно по разному, например, через событие onLoad.

Пример 4. Автоматический вызов функции

Приведем полные листинги размещения слоя в разных углах браузера.

В правом верхнем углу

<html>

<head>

IE = (document.all);
NC = (document.layers);
Opera = (document.getElementById);

function getHeight() {
if (IE || Opera) send = document.body.clientHeight;
if (NC) send = window.innerHeight;
return send;
}

function getWidth() {
if (IE || Opera) send = document.body.clientWidth;
if (NC) send = window.innerWidth;
return send;
}

</script>
</head>

<div id=xyz style="position: absolute; top: 0px; width: 100px; z-index: 1">
<table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black cellspacing=0>
<tr>
<td>Содержание</td>
</table>
</div>

</body>
</html>

В правом нижнем углу

<html>

<head>

// функции getHeight и getWidth описываются как в примере 1

function putLayer() {
widthBrowser = getWidth() - 100;
heightBrowser = getHeight() - 200;

if(IE) {
eval('document.all["xyz"].style.left = widthBrowser');
eval('document.all["xyz"].style.top = heightBrowser');
}

if(NC) {
eval('document.layers["xyz"].left = widthBrowser');
eval('document.layers["xyz"].top = heightBrowser');
}

if(Opera) {
eval('document.getElementById("xyz").style.left = widthBrowser');
eval('document.getElementById("xyz").style.top = heightBrowser');
}

setTimeout('putLayer()',1000);
}

</script>
</head>

В левом нижнем углу

// функции getHeight и getWidth описываются как в примере 1

function putLayer() {
heightBrowser = getHeight() - 200;

if(IE) eval('document.all["xyz"].style.top = heightBrowser');
if(NC) eval('document.layers["xyz"].top = heightBrowser');
if(Opera) eval('document.getElementById("xyz").style.top = heightBrowser');

setTimeout('putLayer()',1000);
}

</script>
</head>

<div id=xyz style="position: absolute; left: 0px; top: 0px; width: 100px; z-index: 1">
<table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black cellspacing=0>
<tr>
<td>Содержание</td>
</table>
</div>

</body>
</html>


	Главная > Динамический HTML > Определение ширины браузера