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

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>

KidsKilla · 21.07.2006, 14:05

Код 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%" id="myColumn">
		<tr><td>
		RIGHT
		</td>
		</tr></table>
</td>
</tr>
</table>

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

</body></html>

Sorin · 22.07.2006, 05:57

Kidskilla,
Вы фактически вставили тот же код что я поставил выше (немного изменив скрипт, но не место скрипта). Или вы не поняли в чем суть дела, или вообще не читали что написал и к тому же Ваш пример не работает в отличии от моего.
Ладно...
Короче, после некоторых экспериментов я понял что такая-же структура но основанная на слои работает 100%. Почему же таблицами проблема?

Все же есть решение этой проблемы? Есть идеи? Мне нужно чтоб скрипт (или хотя бы переменная aaa работала внутри таблички RIGHT
Вариант с слоями + таблицами не проходит.

Sorin · 22.07.2006, 06:20

Да, теперь я понял что имелось в виду с этим нерабочим вариантом, но исправив его все же также не работает. Вот что сделал:

Код 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>
                          <div  id="myColumn">
		RIGHT
                          </div>
		</td>
		</tr></table>
</td>
</tr>
</table>

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

</body></html>

Было упущено новый идентификатор (ID в ячейке таблицы RIGHT) и лишний плюс после innerHTML. Впрочем я почти ничего не понимаю в JS, поэтому даже в голову не приходит что происходит и почему не работает.

Sorin · 22.07.2006, 06:55

После того как взглянул в справочнике понял в чем проблема. Короче все теперь работает как надо. Ниже привожу рабочий пример - может кому либо понравится эта идея и применит ее.

Код 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>
		<div ID="myColumn">
		RIGHT
		</div>
		</td>
		</tr></table>
</td>
</tr>
</table>

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

		</script><input onclick=document.getElementById("myColumn").innerHTML=""+aaa+"" type="button" value="Give me size of height of LEFT column" name="B1">

</body></html>

Спасибо Kidskilla что подтолкнул к новой идее что и решило проблему. Немного глупо (как бы сам с собой разговариваю в этом топике). Кажется что никто не заинтересован...

KidsKilla · 25.07.2006, 14:33

твой последний вариант тот же что и приведённый мной + 1 лишний ненужный див...

Sorin · 27.07.2006, 18:30

Как раз нет лишнего дива. Без этого дива скрипту не знать куда прописать результат(таблицу не воспринимает). Также были некие ошибки как лишний плюсик и скобка, которые нарушают работу скрипта. Ладно, - все такие ошибки делают..., но иногда из за простой ошибки многие не копаются дальше и сдаются.
Спасибо за помошь!! Если бы не эта подсказка, то не знаю как бы решил...

KidsKilla · 27.07.2006, 19:51

Цитата:

Сообщение от Sorin

Как раз нет лишнего дива. Без этого дива скрипту не знать куда прописать результат(таблицу не воспринимает). Также были некие ошибки как лишний плюсик и скобка, которые нарушают работу скрипта. Ладно, - все такие ошибки делают..., но иногда из за простой ошибки многие не копаются дальше и сдаются.
Спасибо за помошь!! Если бы не эта подсказка, то не знаю как бы решил...

ты можешь ид присвоить и ячейке таблицы всё будет работать как надо.
+= это не ошибка, нарушающая работу скрипта а оператор:
var x = 'текст1 ';
x += '2'; // то же самое что x = x + '2'
alert(x) // 'текст1 2';

т.е.

Sorin · 29.07.2006, 18:29

Цитата:

Сообщение от KidsKilla

ты можешь ид присвоить и ячейке таблицы всё будет работать как надо.
+= это не ошибка, нарушающая работу скрипта а оператор:
var x = 'текст1 ';
x += '2'; // то же самое что x = x + '2'
alert(x) // 'текст1 2';

т.е.

Ладно, спорить не буду, но то что там имеется ошибка - это факт, т.к. пример не работает. Просто запусти и сам увидишь. Да, += потом заметил что является оператором, но давно не копался в JS и забыл про это. Никогда не использовал это... Что касается таблиц и ID, то пробовал в практике и не получилось. Вот и пришлось на слои переходить, иначе подумал бы что вообще скрипт не работает.

KidsKilla · 30.07.2006, 01:56

Цитата:

Сообщение от Sorin

но то что там имеется ошибка - это факт, т.к. пример не работает. Просто запусти и сам увидишь.

???
спецом проверил. всё как надо пашет...