Я подумал создать страницу дизайн который будет меняться в зависимости от высоты страницы (не размер окна броузера, или экрана, а именно вся высота учитывая прокрутку).
Упрощенная идея такова: Имеется табличка с двумя колонками - 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>