Динамическое управление позиционированием элементов



Динамическое управление позиционированием элементов

Чтобы все это реализовать, придется использовать позиционирование объектов на экране. Прежде всего, определим позицию блока, в который будет включена таблица (“игровое поле”):

<DIV STYLE="width: 400px; height: 400px; position: absolute;

top: 100px;">

Вероятно, вы обратили внимание на то, что сейчас мы задали только пози- цию блока <DIV> по вертикали (с помощью стилевого свойства top). А каким должно быть свойство left (позиция по горизонтали)? Хотелось бы, чтобы наше игровое поле располагалось по центру, но ведь мы не знаем ширину окна броузера пользователя!



К счастью, в Internet Explorer есть возможность определить ширину окна броузера, прочитав значение свойства document.body.clientWidth. После этого все уже просто. Сначала разделим это значение на 2, чтобы получить пози цию в центре экрана. Поскольку наша таблица будет иметь ширину 400 пикселов, для вычисления позиции ее левого края вычтем из позиции центра экрана половину ширины таблицы, то есть 200:

tstart=document.body.clientWidth/2-200;

В данном примере мы присвоили вычисленное значение переменной tstart. Поскольку оно будет неоднократно использоваться в дальнейшем, полезно объявить эту переменную как глобальную (то есть не внутри какой-либо функции, а в самом начале кода JavaScript). Теперь осталось дать имя нашему блоку <DIV>:

<DIV ID="maintab" STYLE="width: 400px; height: 400px; position: absolute; top: 100px;">

и присвоить его свойству left вычисленное значение:

<SCRIPT LANGUAGE”"JavaScript" TYPE="text/javascript">

var tstart; function mainpos()

{ tstart document.body.clientWidth/2-200;

document.all.maintab.style.left=tstart; )

//--> </SCRIPT>

Приведенная выше функция mainposO должна выполняться сразу после загрузки страницы (иначе пользователь увидит таблицу неизвестно где). Поэтому установим в теге <BODY> уже знакомый нам обработчик событий on Load:

<BODY onLoad="mainpos() ">

Вот теперь при загрузке страницы (а точнее, сразу после нее) наш блок <DIV> , содержащий таблицу, будет отцентрирован. Но как быть с ячейками таблицы? Ведь мы знаем, что если даже в тегах <TD> указать ширину и высоту, эти требования будут восприняты броузером лишь как рекомендательные, и на экране просто не отобразится ни одна ячейка. Если же поместить в ячейки неразрывные пробелы, то строки таблицы получатся мизерной высоты (Рисунок 7.8).



Содержание раздела