Клуб друзей



Позиционирование объектов по-вертикали в зависимости от размеров окна пользователя

По многочисленным просьбам я попытался решить эту проблему. Часто спрашивают, как можно определить размеры открытого окна пользователя и соответственно разместить объекты в зависимости от его размеров. Для этого нужно определить размеры окна пользователя. Если пользователь изменил размер после загрузки документа, необходим рефреш - таково условие. Например MSIE может на ходу перестраивать таблицы, а вот NN этого не может, - только рефреш, но а у нас тем более руки связаны. Определим размеры например так:

<script language=javascript>
N=window.navigator.appName.substring(0,1);
w=0; h=0;
si=140; // размер предполагаемого объекта по-вертикали
if(N=="M") {w=document.body.clientWidth;h=document.body.clientHeight;}
if(N=="N") {w=window.innerWidth; h=window.innerHeight;}
if (h < (si+20)) h=500; // если окно меньше объекта
</script>


Итак, получили значения w и h. Для данного окна например это -легко проверить как изменятся значения после изменения размера этого окна и последующего рефреша. - Здесь размеры только, как говорится "полезной площади". Внимание, определение размеров, тоесть сам скрипт должен находиться в теле документа, а не в заголовочной части. В таком случае, зная размер по вертикали (h), мы можем регулировать координаты отображаемого объекта. Значение размера по-горизонтали (w) если не используется - можно исключить. Используем значение h для установки Height растяжки (прозрачного GIF-а 1х1 пиксел):

<TABLE BORDER="0">
<TR>
<TD valign="_top">
<script language=javascript>
document.writeln('<IMG SRC="space.gif" WIDTH=1 HEIGHT='+((h+si)/2)+ 'BORDER=0 ALT="">');
</script></TD>
</TR>
<TR>
<TD>Объект</TD>
</TR>
</TABLE>
</body>


В данном примере (h+si)/2 означает, что объект размером по вертикали в 140 пикселов будет располагаться в центре по-вертикали, но а по горизонтали есть другие средства выравнивания. Согласно правилам преобразования типов в JavaScript - допускается конкатенция строки с числовым аргументом, при этом число меняет тип на строковый, - это как раз то, что нам и нужно.
   Можно конечно определить размер внешней таблицы равным 100% и использовать центральное позиционирование атрибутом valign. Дело в том, что такое работает, и все гораздо проще, но иногда случаются непонятные баги при использовании процентных установок размеров таблиц, результат может оказаться непредсказуем. Поэтому лучше всеже использовать графические распорки, - надежнее.



[<<Назад]

WDstudio © 2000г.