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

Рецепты HTML

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

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

←   Апрель 2004   →
 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
29
30
Автор
Влад Мержевич

Статистика

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

Рецепты HTML # 126


Информационный Канал Subscribe.Ru
Рецепты HTML
Выпуск № 126

Добрый день.

Пока сайт не заработал вновь, предлагаю приобрести его локальную версию. Архив объемом 2,12 Мб включает в себя более 200 статей по темам создания сайта: HTML, CSS, Динамический HTML, JavaScript, PHP, дизайн, верстка и многое другое. Сайт оптимизирован для локального просмотра и не требует подключения к Интернету. Разрешается передавать его своим друзьям в личное пользование, нельзя только применять в коммерческих целях и перепечатывать статьи. Стоимость всего архива 1WMZ (один бакс по-нашему) или 30WMR (тридцать рублей значит).
Перечислить деньги можно на счет Z049001049533 или R706338466912. Обязательно в примечании укажите адрес электронной почты, на который высылать архив.

Сегодня продолжение темы о выравнивании по центру. На этот раз воспользуемся программированием на языке JavaScript.

Размещение слоя по центру с помощью JavaScript

С помощью собственных написанных функций на языке 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. Выравнивание слоя по центру
<html>
<head>
<style>
#xyz {
position: absolute;
width: 300px;
height: 200px;
background: #fc0;
border: solid 1px black
}

#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() {
left = (document.body.clientWidth - 300)/2
top = (document.body.clientHeight - 200)/2

document.getElementById("xyz").style.left = left
document.getElementById("xyz").style.top = top

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>

Идентификаторы left и top хранят координаты слоя, при которых он будет размещаться по центру. Они вычисляются на основе ширины и высоты рабочей области браузера, из которой вычитается ширина и высота слоя (300 и 200 пикселов соответственно) и делится пополам.

Рекурсивный вызов функции putLayer происходит каждые 1000 миллисекунд (второй аргумент в вызове функции setTimeout). Или другими словами, каждую секунду. Вы можете изменить это значение в меньшую сторону, чтобы задержки при смещении слоя были минимальны.

Обратите внимание на конструкцию javascript: closeWindow(). Она предназначена для вызова функции closeWindow(), которая прячет наш слой. Отобразить его по новой можно только обновив веб-страницу или добавив функцию, показывающую слой. Но это уже сделайте самостоятельно.


Copyright © Влад Мержевич 2002 - 2004
По всем вопросам пишите на адрес vlad@htmlbook.ru
Запрещается частичное или полное воспроизведение и цитирование статей без разрешения автора.

http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу

В избранное