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

Программирование на JavaScript

  Все выпуски  

Размеры и координаты HTML элементов. Часть I. Добываем !


Программирование на JavaScript

Выпуск      : 39
Подписчиков : 14300
Cайт        : SoftMaker.com.ru
Архив       : Программирование на JavaScript (архив)
В этом выпуске
HTML и CSS в примерах. Создание Web-страниц

HTML и CSS в примерах. Создание Web-страниц

От автора

Здравствуйте уважаемые подписчики !

Как всегда, рад приветствовать вас на страницах этой рассылки.


В первую очередь, поздравляю всю прекрасную половину аудитории рассылки с праздником 8-го Марта ! Будте всегда красивыми, радостными и счастливыми !


Очень благодарю Богдана Цимбалу за статью для этого выпуска.

В позапрошлом номере проводилось голосование по поводу тем будущих выпусков рассылки. Ниже приведены его итоги.

ТемаГолосов
Навигация по сайту (навигационные меню, навигация с фреймами, и.т.д.)33
Анимационные эффекты13
Визуальные эффекты на основе фильтров IE8
Игры (сапер, тетрис, питон, и.т.д.)5
Свой вариант14

Мне пришло много писем с развернутым описанием того, что было бы желательно рассмотреть в рассылке. К сожалению, я не всем смог ответить всем :( Но, уверяю вас, все Ваши пожелания обязательно будут учтены при выборе тем для следующих выпусков. Большое спасибо всем тем, кто принял участие в голосовании !

Как обычно, напомню, что если Вы хотите:
  • - опубликовать здесь скрипт или статью
  • - создать и вести какой либо раздел в этой рассылке
  • - поучаствовать в формировании ее содержимого
просто напишите мне.

Я также буду рад любым пожеланиям, замечаниям, предложениям (а также сообщениям об ошибках) по поводу рассылки и сайта. Их можно отправлять по тому же адресу.

И, как всегда, вы можете задать свои вопросы по JavaScript - программированию на форуме. Или обсудить их в дискуссионном листе "Скрипты для сайта".

С уважением, Вахтуров Виктор.

Статьи

Размеры и координаты HTML элементов. Часть I. Добываем !

Наверно те из Вас (и не только), кто хотя бы раз пробовал создавать элементы пользовательского интерфейса (такие как меню, календарь, др.), реагирующие на события мыши, имели проблемы с определением РЕАЛЬНЫХ координат и размеров HTML элемента. Те, кто часто работал с HTML и CSS, знают, что хотя такие свойства, как top, left, width и height, и ЗАДАЮТ координаты и размеры элемента, но очень часто в результате формирования дерева DOM они не отвечают действительности. Почему ? Элементарно - текст внутри элемента не помещается в заданные размеры, поэтому браузер их изменяет под свои нужды. Да, в принципе можно заставить браузер не менять размеры, но в большинстве случаев этот способ не подходит. То есть, можно написать:

var width = el.style.width; // el - ссылка на HTML элемент

Но никто не ручается, что вы получите реальную ширину (и очень часто она не будет соответствовать действительности).

Создатели стандарта DOM (WWW Consortium) предвидели такую потребность разработчика (не надо радоваться раньше времени ;) ). Давайте вспомним, как должны вычисляться свойства элемента. Сначала значение определяется из спецификации (специфицированное значение), затем при необходимости преобразуется к абсолютному значению (вычисленное значение), и, наконец, преобразуется с учетом ограничений контекста (фактическое значение).

  • Специфицированное значение - значение заданное с помощью CSS;
  • Вычисленное значение - преобразование относительных значений('auto', '%') в абсолютные;
  • Фактическое значение - то, что ми видим на дисплее.

В DOM предусмотрено два метода для доступа к таким свойствам:

  • document.getOverrideStyle(elt, pseudoElt) - возвращает объект CSSStyleDeclaration, содержащий специфицированные значения свойств стилей элемента elt. Аргумент pseudoElt должен быть именем псевдоэлемента CSS или пустой строкой.
  • window.getComputedStyle(elt, pseudoElt) - возвращает объект CSSStyleDeclaration, содержащий вычисленные значения свойств стилей элемента elt. Этот объект доступен только для чтения. Аргумент pseudoElt должен быть именем псевдоэлемента CSS или пустой строкой.
НО, во первых нет способа доступа к фактическим значениям, а во вторых сотрудники Microsoft как всегда решили сделать по-своему (el.runtimeStyle и el.currentStyle), да и представление у них о вычисленных значениях какое-то искаженное на мой взгляд. Так, что и это нам мало чем помогает (но полезно знать что существует такая возможность :) ). Странно, но спасение (поддерживаемое всеми обозревателями) пришло именно от разработчиков Internet Explorer, которые добавили HTML элементам такие свойства как: offsetWidth, offsetHeight, offsetTop и offsetLeft. Единственный нюанс использования offsetTop и offsetLeft есть то, что они вычисляются относительно offsetParent, а не относительно элемента body. Это можно просто решить, используя обыкновенную рекурсию в JavaScript:

function getPos(el) {
    var r = {x : el.offsetLeft, y : el.offsetTop};
    if (el.offsetParent) {
        var tmp = getPos(el.offsetParent);
        r.x += tmp.x;
        r.y += tmp.y;
    }
    return r;
}

Конечно, существует возможность того, что среди offsetParent'ов окажутся элементы с прокруткой, но по Вашим заявкам ми можем решить такую проблему (а заодно и разузнать побольше о прокрутке элементов :) ).

Ну вот пока что и все !


Автор статьи: Богдан Цимбала.


Подготовка выпуска: Вахтуров Виктор.

Анонсы книг по программированию на JavaScript
Flash MX. Библия пользователя (+ CD-ROM)
Flash MX. Библия пользователя (+ CD-ROM)

Автор: Роберт Рейнхардт, Сноу Дауд

Книга представляет собой наиболее всестороннее и исчерпывающее руководство по новой версии программы Flash MX. Она поможет вам в первые дни знакомства с программой и останется ценным источником, даже когда вы достигнете определенного мастерства в использовании Flash. Решая проблему интеграции Flash с другими программами и пытаясь `втиснуть` уникальное и завершенное содержание в формат Flash, вы будете знать, куда обратиться. В этой книге внимание уделяется практически каждому аспекту функциональных возможностей Flash. Подробно рассматривается интерфейс программы, не менее детально изложены вопросы импортирования анимации и звука в фильмы Flash. Поскольку Flash - многозадачное приложение (иллюстрационная программа, графический и звуковой редактор, механизм анимации и процессор создания сценариев), авторы книги рассматривают работу каждого компонента отдельно. В книге собраны советы и технические приемы от нескольких лучших представителей в индустрии Flash, так что вы сможете воспользоваться их многолетнимопытом. Это именно та книга, которую необходимо иметь любому профессиональному дизайнеру Web, разработчику или аниматору.

Страница книги на Озоне
Ваша домашняя страничка в Интернете. Homepage, или Просто
Ваша домашняя страничка в Интернете. Homepage, или Просто "хомяк"

Автор: Андрей Калиновский

Рассмотрен процесс создания персональной домашней страницы на конкретных примерах и с пояснениями. Описано, какие темы и какая информация являются в Интернете наиболее популярными и востребованными, какие программы необходимо иметь на своем компьютере начинающему web-мастеру, как правильно указывать имена файлов, как просматривать и оценивать изготовленные HTML-страницы. Рассмотрены работа с текстом, в том числе форматирование и оформление, использование различных шрифтов и внешнего вида текста, гиперссылки всех существующих типов, добавление графики и таблиц стилей. Приведены примеры полезных и простых сценариев JavaScript. Описаны процессы быстрого и продуктивного тестирования сайта для выявления недостатков и ошибок, возникающих в ходе разработки. Даются рекомендации по размещению сайта в Интернете и набор приемов раскрутки и продвижения сайта.

Страница книги на Озоне
Всего доброго. До встречи в следующем номере.

В избранное