Скрипт: динамический дизайн

Sorin · 21.07.2006, 01:44

Я подумал создать страницу дизайн который будет меняться в зависимости от высоты страницы (не размер окна броузера, или экрана, а именно вся высота учитывая прокрутку).
Упрощенная идея такова: Имеется табличка с двумя колонками - LEFT и RIGHT. В колонке LEFT, которая занимает 70% длины и является приоритетной (т.е. важнее) помещается основной контент, а в правой (RIGHT) длина которой 30%, помещается реклама и прочая лабуда. В колонке LEFT контент бывает разный (один шаблон на весь сайт), поэтому высота этой колонки будет меняться в зависимости от количества\размера текста и изображений, а колонка RIGHT должна изменяться динамически в зависимости от высоты правой колонки, чтоб высота обеих колонок была приблизительно одинаковой (уравновешенный дизайн) . Колонка RIGHT не должен менятся с % или резиновым способом, а именно так:
Если высота LEFT превышает высоту колонки RIGHT на 200 пикселов, то выполняется document.write которая прописывает блок1 (высотою 150-200 точек) с рекламой. Если высота LEFT больше на 400 точек, то прописывается в колонке RIGHT блок2 (который имеет высоту 350-400 точек) и.т.д.
Ниже привожу нтмл страницы в которой скрипт определяет общую высоту таблицы LEFT в переменную aaa. C этой переменной можно делать расчет (путем IF ELSE ) и выбрать нужный блок который будет записан путем document.write в колонке RIGHT. Вот только одна проблема - скрипт определяет высоту и переменные работают только в самом низу (вне общей таблицы) страницы. Как заставить этот скрипт чтоб он работал если поместить его внутри ячейки таблицы RIGHT ?

Вот код рабочего скрипта:

Код HTML:

<html><head>
<title></title>
</head>
<body>
<table border="1" height="50%" width="500">
<tr>
<td width="70%">
		<table height="100%" id="myPage">
		<tr><td>
		LEFT
		</td></tr></table>
		</td>
<td  width="30%">
		<table height="100%">
		<tr><td>
		RIGHT
		</td>
		</tr></table>
</td>
</tr>
</table>

		<script>
		aaa = (document.getElementById('myPage').offsetHeight);
		document.write("Height of page is "+""+aaa+""+"px");
		</script>

</body></html>

А вот как бы хотелось быть, но скрипт отказывается работать, вернее переменная теряется. Есть идеи? Прошу излагать мысли более практичным способом (не предположениями а рабочим примером), поскольку я дилетант в JS.

Надеюсь эта штука многим будет интересна и полезной, поскольку такой метод показа рекламы или второстепенной информации в боковых колонках практикуется очень широко.

Код HTML:

<html><head>
<title></title>
</head>
<body>
<table border="1" height="50%" width="500">
<tr>
<td width="70%">
		<table height="100%" id="myPage">
		<tr><td>
		LEFT
		</td></tr></table>
		</td>
<td  width="30%">
		<table height="100%">
		<tr><td>
		RIGHT
		<script>
		aaa = (document.getElementById('myPage').offsetHeight);
		document.write("Height of page is "+""+aaa+""+"px");
		</script>
		</td>
		</tr></table>
</td>
</tr>
</table>
</body></html>