База данных для веб-мастеров: Библиотека

Позиционирование элементов для IE и NN.

В этом "опыте" рассмотрим как реализовать позиционирование объектов как для Internet Explorer, так и Netscape Navigtor (вариант для Internet Explorer мы уже рассматривали). Для того, чтобы было лучше понятно, рассмотрим различие в свойствах позиционирования объектов в этих браузерах.

Горизонтальная координата объекта в пикселях:
document.layers["obj_name"].left
document.all["obj_name"].pixelLeft
Вертикальная координата объекта в пикселях:
document.layers["obj_name"].top
document.all["obj_name"].pixelTop
Ширина объекта в пикселях:
document.layers["obj_name"].clip.width
document.all["obj_name"].pixelWidth
Высота объекта в пикселях:
document.layers["obj_name"].clip.height
document.all["obj_name"].pixelHeight

Средствами JavaScript, с применением уже рассмотренной библиотеки detect.js, процедуры установки и чтения этих свойств можно реализовать следующим образом:

function getX(el) {
  if (NN) {
     return(document.layers[el].left);
  }
  else {
     return(document.all[el].style.pixelLeft);
  }
}

Я надеюсь, что общая идея ясна? Для желающих разобраться в подробностях, предлагаю скачать последнюю версию библиотеки detect.js, которая, на сегодняшний день, содержит много новых функций, которые кроме определения типа браузера позволяют манипулировать различными свойствами позиционирования объектов и параметрами окна браузера (краткое описание внутри файла).

Необходимо заметить, что эти методы в Netscape Navigator можно использовать только для позиционированных объектов, которые входят в коллекцию layers. Это <DIV> и <LAYER>.

На основе этих методов я переписал библиотеку floaters.js, чтобы ее можно было использовать в обоих браузерах. Новую версию можно взять в файле d-floaters.zip. Для ее использования указываем обе библиотеки в заголовке страницы:

<SCRIPT 
   TYPE="text/javascript"
   LANGUAGE="JavaScript"
   SRC="detect.js">
</SCRIPT>
<SCRIPT
   TYPE="text/javascript"
   LANGUAGE="JavaScript"
   SRC="d-floaters.js">
</SCRIPT>

В тэге <BODY> задаем обработчик события onLoad, содержащий код следующий код:

  function init() {
    initDetect();
	startFloaters();
  }

Создаем процедуру запуска движения startFloaters()

  function startFloaters() {
     fl1 = new floater("fl1",1,2,true);
	 flStart(fl1);
  }
  
  var fl1;

Описание параметров конструктора floater можно найти в прошлом опыте. Сам движущийся объект теперь необходимо задавать по-другому. В данном случае - так:

<DIV
   ID="fl1"
   NAME="fl1"
   STYLE="position: absolute; top: 0; left: 0; z-index: 100">
<IMG 
   SRC="images/0032_01.gif"
   WIDTH=50 HEIGHT=21 
   BORDER=0
   ALT="floater">
</DIV>

И на последок небольшой пример интересного применения методов позиционирования: moveit.html

http://exper.ural.ru