Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 12.07.2012, 11:17
Аватар для Squirr
Интересующийся
Отправить личное сообщение для Squirr Посмотреть профиль Найти все сообщения от Squirr
 
Регистрация: 11.03.2012
Сообщений: 18

И снова вынужден я обратиться к мудрости гуру. Проблема схожая, поэтому новую ветку заводить не стал.
На странице следующая конструкция из блоков:

Блоки div#r0 и div#r1 сменяют друг друга при нажатии на ссылку и имеют разное количество контента (высота их не задана).
Мне нужно добиться того, чтобы при нажатии на ссылку изменялась параметры "height" у div#content и "top" у div#bottom.
Я написал следующий скрипт:
<div id="content">
    	<table width="100%">
        	<tr><td>
            	<div id="contentMenuPersonal">
    	    		<table>
        	    		<tr><td class="contentMenu"><a href="/">Main</a></td></tr>
                        ...
                    </table>
                </div>
                <div id="bannerBig1">
					<div id="r0">
                    	<p>Текст</p>
						<a href="javascript:change_visibility ('r0', 'r1')">Читать далее &rarr;</a>
					</div>
					<div id="r1" style="display: none;">
                    	<p>Текст</p>
						<a href="javascript:change_visibility ('r1', 'r0')">&larr; скрыть текст</a>
					</div>
                </div>
            </td></tr>
        </table>
<script type="text/javascript">
	if (document.getElementById("r1").style.display = 'none') document.getElementById("content").style.height = "1100px";
	else document.getElementById("content").style.height = "1484px";
</script>
	</div>
    <div id="bottom">
<script type="text/javascript">
document.getElementById("content").style.height = ( document.getElementById("content").getBoundingClientRect().bottom - document.getElementById("content").getBoundingClientRect().top ) + 'px';
var h = parseInt((document.getElementById("content").getBoundingClientRect().bottom - document.getElementById("content").getBoundingClientRect().top));

//if (h == 1484.8333740234375)
if (h > 1450)
{
	document.getElementById("bottom").style.top = "1620px";
}
else
{
	document.getElementById("bottom").style.top = "1275px";
}
</script>
    </div>

Я долго пытался его отладить, но пока не смог добиться нужного результата. Скрипт вынесен в сами блоки, потому что иначе он почему-то вообще не работал, как будто браузер его не видел. Функция смены видимости блоков "r0" и "r1" работает нормально, так же как и функция, которая меняет параметр "top" у div#bottom (проверено изменением условия). А вот параметр "height" у div#content никак изменить динамически не получается.
Ответить с цитированием
  #22 (permalink)  
Старый 12.07.2012, 12:30
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

Сообщение от Squirr Посмотреть сообщение
Я долго пытался его отладить, но пока не смог добиться нужного результата. Скрипт вынесен в сами блоки, потому что иначе он почему-то вообще не работал, как будто браузер его не видел. Функция смены видимости блоков "r0" и "r1" работает нормально, так же как и функция, которая меняет параметр "top" у div#bottom (проверено изменением условия). А вот параметр "height" у div#content никак изменить динамически не получается.
во-первых в условиях
<script type="text/javascript">
    if (document.getElementById("r1").style.display = 'none') document.getElementById("content").style.height = "1100px";
    else document.getElementById("content").style.height = "1484px";
</script>

поставьте == и если изначально свойство height у элемента content не задано, то вы не сможете его изменить
Ответить с цитированием
  #23 (permalink)  
Старый 12.07.2012, 13:30
Аватар для Squirr
Интересующийся
Отправить личное сообщение для Squirr Посмотреть профиль Найти все сообщения от Squirr
 
Регистрация: 11.03.2012
Сообщений: 18

lord2kim, да, я постоянно забываю ставить равенство в условии вместо присваивания. Высоту div#content я попробовал задать разными способами, но никакого результата не было. При этом значение "top" у div#bottom у меня вообще нигде не задано, однако это условие работает. Я уже не знаю, что тут ещё можно сделать. А функция скрытия части текста на странице должна быть обязательно.
Кстати. Если не писать дополнительный скрипт для сдвига блоков, то значение "height" у div#content изменяется автоматически, только отдельный нижний блок остаётся на своём месте, потому что он там зафиксирован с абсолютным позиционированием.
Ответить с цитированием
  #24 (permalink)  
Старый 12.07.2012, 13:40
Аватар для Squirr
Интересующийся
Отправить личное сообщение для Squirr Посмотреть профиль Найти все сообщения от Squirr
 
Регистрация: 11.03.2012
Сообщений: 18

Убрал строку с определением высоты блока content. После этого его высота стала меняться автоматически. Так что теперь загвоздка в сдвиге div#bottom. Что-то, видимо, не так в условии, но оно работает. Только отладить его надо. Если я ставлю в условии
if (h < 1450)
, то div#bottom.top = 1620px постоянно, и наоборот.
Ответить с цитированием
  #25 (permalink)  
Старый 12.07.2012, 14:00
Аватар для Squirr
Интересующийся
Отправить личное сообщение для Squirr Посмотреть профиль Найти все сообщения от Squirr
 
Регистрация: 11.03.2012
Сообщений: 18

Написал функцию проверки значения "height" у div#content. При скрытом тексте 1076, при раскрытом — 1469,8333740234375. Условие, вроде бы правильно составил. Не понимаю, что тут не так.
Ответить с цитированием
  #26 (permalink)  
Старый 12.07.2012, 14:21
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Squirr,
Мон чисто табличкой верстку забодать и никаких мучений
#content - это сама табла - отступы для ячеек #meny и #banner задаем cellpadding #ro0/#r1 => div блок cо style=width:100%; height:100%;
Ответить с цитированием
  #27 (permalink)  
Старый 12.07.2012, 15:10
Аватар для Squirr
Интересующийся
Отправить личное сообщение для Squirr Посмотреть профиль Найти все сообщения от Squirr
 
Регистрация: 11.03.2012
Сообщений: 18

Deff, если по-другому не получится, только такой вариант и останется. А так, как я пытаюсь сделать, не получится по-вашему? Из-за различий в браузерах, конфликта внутреннего или ещё каких-то факторов.
Ответить с цитированием
  #28 (permalink)  
Старый 12.07.2012, 16:16
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Объясните подробнее какого поведения хотите добиться (опишите поведение каждого из блоков).
Например, пока не понятно представленный на рисунке вид должен оставаться таким в рамках экрана или может прокручиваться, меню имеет постоянную высоту или зависит от содержимого, то же самое про баннер и т.д., также непонятно как это всё должно вести себя при масштабировании.

Deff, таблицу тоже проблематично удержать в рамках экрана при масштабировании (ну или я может быть чего-то не догоняю).

Вот пример
<!doctype html>
<style>
  body {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
  }
  table {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%; 
    height: 100%;
  }
  td {
    border: 1px solid gray; 
  }
  table div {
    width: 100%;
    height: 100%; 
    overflow: auto;
  }
</style>

<table>
  <tr>
    <td colspan="2" height="5%">mainMenu</td>
  </tr>
  <tr >
    <td width="30%" height="90%">
      menu
    </td>
    <td width="70%">

<div>
content1<br>content1<br>content1<br>content1<br>content1<br>
content1<br>content1<br>content1<br>content1<br>content1<br>
content1<br>content1<br>content1<br>content1<br>content1<br>
content1<br>content1<br>content1<br>content1<br>content1<br>
content1<br>content1<br>content1<br>content1<br>content1<br>
content1<br>content1<br>content1<br>content1<br>content1<br>
</div>

    </td>
  </tr>
  <tr>
    <td colspan="2">bottom</td>
  </tr>
</table>

Последний раз редактировалось bes, 12.07.2012 в 16:30.
Ответить с цитированием
  #29 (permalink)  
Старый 12.07.2012, 16:59
Аватар для Squirr
Интересующийся
Отправить личное сообщение для Squirr Посмотреть профиль Найти все сообщения от Squirr
 
Регистрация: 11.03.2012
Сообщений: 18

bes,
На картинке представлена структура div-ных блоков. #r0 и #r1 — это 2 разных блока с текстом разного объёма, виден в любой момент времени только 1 из них. Соответственно, должна меняться высота блока banner, в котором находится текст (это автоматом происходит, т.к. его высота не определена) и высота блока content (тоже не задана, меняется автоматически). Блок bottom находится отдельно от них. Это нужно, чтобы не нарушать дизайн. У него, соответственно, надо реализовать динамически изменяемое установленное свойство CSS top. Вот этого-то мне добиться и не удалось пока.
В блоке banner основной контент, а не баннер. Название блока перешло по наследству с главной страницы, чтобы не писать лишние стили. Здесь я оставил название, чтобы самому потом не запутаться.

Последний раз редактировалось Squirr, 12.07.2012 в 17:02.
Ответить с цитированием
  #30 (permalink)  
Старый 12.07.2012, 18:06
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Squirr,
Сообщение от bes
Например, пока не понятно представленный на рисунке вид должен оставаться таким в рамках экрана или может прокручиваться, меню имеет постоянную высоту или зависит от содержимого, то же самое про баннер и т.д., также непонятно как это всё должно вести себя при масштабировании.
не на все вопросы ответили (а вариантов развития много)

Как вариант
<style>
  div {
    padding: 0px;
    margin: 1%;
  }
  .menu {
   float: left;
    width: 30%;
    background: lightgrey;
  }  
  #banner {
    padding: 10px;
    float: left;
    width: 63%;
    background: green;
  }  
  #banner div {
    background: lightgrey;
  }
  .bottom {
    clear: both;
    background: gray;
  }
  
</style>

<div class="content">

  <div class="menu">
<a href="#" 
  onclick="
    banner.children[i].style.display = 'none';
    banner.children[j].style.display = 'block';
    k = i; i = j; j = k;
    return false;
">
menu</a>
</div>

  <div id="banner">
    <div>
content1<br>content1<br>content1<br>content1<br>content1<br>content1<br>content1<br>
content1<br>content1<br>content1<br>content1<br>content1<br>content1<br>content1<br>
   </div>
    <div style="display: none">content2<br>content2</div>
  </div>

</div>

<div class="bottom">
bottom
</div>

<script>
  var i = 0;
  var j = 1;
  var k;
</script>

Последний раз редактировалось bes, 12.07.2012 в 18:15.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получение вычисленного значения css свойства FanAizu jQuery 2 12.03.2014 18:30
Как узнать о поддержке браузером CSS свойства? estoesyo Элементы интерфейса 3 18.10.2010 21:12
Использование css свойства display для подменю Lex4e Общие вопросы Javascript 7 07.01.2010 21:02
Запретить свойства из CSS SunnyDay Общие вопросы Javascript 11 29.09.2008 13:30
Изменение имиджа по таймеру с помощью CSS и JavaScript Aimless Общие вопросы Javascript 10 15.08.2008 17:09