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


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

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

Пример 1. Функции для определения высоты и ширины
<script language="JavaScript">

// Определение браузера
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. Задание положения слоя в правом углу браузера
span class="select">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. Автоматический вызов функции
<body onLoad="putLayer()">
...
</body>

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

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

<html>
<head> <script language="JavaScript">

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;
}

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);
}

</script>
</head>

<body onLoad="putLayer()">

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

<script language="JavaScript">

// функции 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>

<body onLoad="putLayer()">

<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> <script language="JavaScript">

// функции 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>

<body onLoad="putLayer()">

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



Предыдущая статья     Следующая статья     Список статей