Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Февраль 2003   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Автор
Влад Мержевич

Статистика

12.722 подписчиков
-26 за неделю
←   Все выпуски   →

Рецепты HTML


Информационный Канал Subscribe.Ru
   Новости сайта www.htmlbook.ru

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

Продолжаем тему о динамическом HTML и разных вещах творимых с его помощью.

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

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

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

Пример 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=""xposition:" 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. Чтобы слой располагался поверх остального текста, его значение следует задавать положительным числом больше нуля. Если слой нужно размещать ниже теста, - используется отрицательное значение.

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

Пример 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. Автоматический вызов функции
<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=""xposition:" 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=""xposition:" 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=""xposition:" 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>
Рекомендую подписаться на рассылку:
CenterINet - все для начинающих и опытных web мастеров

  Разделы сайта
 
Создание сайта
  HTML
  CSS
  Графика
  Дизайн
  Инструментарий
  Справочная информация
  Шаблоны
  Форум

  Подписка на новости
  Введите ваш e-mail:
  Помощь
  Не знаете с чего начать или что можно найти на сайте www.htmlbook.ru - воспользуйтесь Помощником по сайту
Copyright 2002 Влад Мержевич, e-mail: vlad@htmlbook.ru
Материалы сайта охраняются законом об авторском праве.
Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт www.htmlbook.ru.
http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное