Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.04.2010, 19:27
Аватар для TAILER
Интересующийся
Отправить личное сообщение для TAILER Посмотреть профиль Найти все сообщения от TAILER
 
Регистрация: 06.07.2009
Сообщений: 24

Изменение высоты div
Смотрел поиск, искал в гугле, но ответа на свой вопрос не нашел.
Думаю может здесь найду ответ...



Нужно изменить высоту adr4, которая должна быть равна - высота adr1 + высота adr2 + высота adr3.

Вообще не силен в javascript, поэтому даже совсем простой пример решить не могу
Ответить с цитированием
  #2 (permalink)  
Старый 10.04.2010, 20:15
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,251

ширина adr1\2\3 и adr4 - фиксированная, тянущаяся или одна сторона фиксированная, другая тянущаяся?
Эта проблема решается простым css.

Например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<style type="text/css">
		*		{margin:0px;padding:0px}
		.main	{margin-left:250px}
		.right	{width:100%;float:right; /*ie6:*/margin-left:-4px;}
		.left	{margin-left:-250px;width:250px}
		</style>
	</head>
	<body>
		<div class="main" style="background: #fdf;">
			<div class="right">4_________</div>
			<div class="left">
				<div style="background: #ddf;">
					1_________<br><br><br><br><br><br>
				</div>
				<div style="background: #dfd;">
					2_________<br><br><br><br><br><br>
				</div>
				<div style="background: #fdd;">
					3_________<br><br><br><br><br><br><br><br><br><br><br><br>
				</div>
			</div>
		</div>
	</body>
</html>

И ещё тысяча способов, плохо искали значит.

Последний раз редактировалось Aetae, 10.04.2010 в 20:51. Причина: пример
Ответить с цитированием
  #3 (permalink)  
Старый 10.04.2010, 22:37
Аватар для TAILER
Интересующийся
Отправить личное сообщение для TAILER Посмотреть профиль Найти все сообщения от TAILER
 
Регистрация: 06.07.2009
Сообщений: 24

Фиксированные adr1 и adr2. И как бы adr4 не увеличивалась, чтобы adr3 тянулось вместе с увеличением adr4.

Вообще, изначально верстая сайт эту проблему можно устранить. Просто есть сайт, который очень большой по содержанию и составу страниц. Там изначально не предусмотрено этого, поэтому чтобы не переверстывать сайт заново, хотелось бы решить эту проблему вставкой маленького скрипта на javascript.
Ответить с цитированием
  #4 (permalink)  
Старый 10.04.2010, 23:14
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,251

Сообщение от TAILER Посмотреть сообщение
Нужно изменить высоту adr4, которая должна быть равна - высота adr1 + высота adr2 + высота adr3.
Сообщение от TAILER Посмотреть сообщение
И как бы adr4 не увеличивалась, чтобы adr3 тянулось вместе с увеличением adr4.
Вы уж определитесь: adr3 тянуть или adr4?

В любом случае как-то так:
window.onload=window.onresize=function() {(a=adr3.offsetHeight+adr3.offsetTop)>adr4.offsetHeight?adr4.style.height=a+'px':adr4.style.height='';}

Последний раз редактировалось Aetae, 10.04.2010 в 23:17.
Ответить с цитированием
  #5 (permalink)  
Старый 10.04.2010, 23:42
Аватар для TAILER
Интересующийся
Отправить личное сообщение для TAILER Посмотреть профиль Найти все сообщения от TAILER
 
Регистрация: 06.07.2009
Сообщений: 24

Aetae,
Спасибо за помощь. +1 в карму

Только вот в FF не работает почему то.
И как организовать если adr4 больше чем adr1+adr2+adr3 тянуть adr3 так чтобы adr3=adr4-adr1-adr2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Тест</title>
<style type="text/css">
table td {
   vertical-align: top;
} 	
</style> 
<script language="javascript">
<!--
window.onload=window.onresize=function() {
(a=adr3.offsetHeight+adr3.offsetTop)>adr4.offsetHeight?adr4.style.height=a+'px':adr4.style.height='';
}
//--> 
</script>

</head>
<body>
<table cellpadding=0 cellspacing=0 style="border: 4px solid #000000;">
<tr>
  <td>     
      <table cellpadding=0 cellspacing=0 border=1 id=adr1 style="border: 4px solid #ff0000; height: 200px;">
        <tr>
          <td>1__________</td>
        </tr>
      </table>      
      <table cellpadding=0 cellspacing=0 border=1 id=adr2 style="border: 4px solid #ff0000; height: 300px;">
        <tr>
          <td>2__________</td>
        </tr>
      </table>      
      <table cellpadding=0 cellspacing=0 border=1 id=adr3 style="border: 4px solid #ff00ff;">
        <tr>
          <td>3__________ <br><br><br><br></td>
        </tr>
      </table>      
  </td>
  <td>
  <table cellpadding=0 cellspacing=0 border=1 id=adr4 style="border: 4px solid #0309fd;">
    <tr>
      <td>4__________</td>      
    </tr>    
  </table>
  </td>
</tr>
</table>
</body>
</html>

Последний раз редактировалось TAILER, 10.04.2010 в 23:46.
Ответить с цитированием
  #6 (permalink)  
Старый 11.04.2010, 01:51
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,251

Это ужасно.

Судя по вашему сообщению, вы ну совсем не знаете javascript, html и css.

Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.

На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/

Задавайте конкретные вопросы по ходу дела.

Решение на табличках вообще выглядит так:
<table cellpadding=0 cellspacing=5 border=5>
	<tr>
		<td style="height: 100px;">1__________</td>
		<td rowspan="3">4__________</td>   
	</tr>
	<tr>
		<td style="height: 200px;">2__________</td>
	</tr>
	<tr>
		<td>3__________ </td>
	</tr>
</table>

Последний раз редактировалось Aetae, 11.04.2010 в 01:56.
Ответить с цитированием
  #7 (permalink)  
Старый 11.04.2010, 17:05
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Опять-таки, а зачем тут яваскрипт?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<style type="text/css">
			.wrapper {
				margin: 0px 0px 0px 300px;
				border: solid black 2px;
			}
			* html .wrapper { /* IE6 */
				height: 0px;
			}
			.column {
				display: inline;
				float: left;
				width: 293px;
				margin: 0px -293px -4px 0px;
				position: relative;
				left: -300px;
				top: -2px;
			}
			.block1 {border: solid red 2px; margin: 0px 0px 5px 0px;}
			.block2 {border: solid blue 2px; margin: 0px 0px 5px 0px;}
			.block3 {border: solid green 2px; margin: 0px 0px 0px 0px;}
			.content {
				display: inline;
				float: left;
				
			}
			.clear {
				height: 0px;
				overflow: hidden;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="column">
				<div class="block1">ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU </div>
				<div class="block2">ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU </div>
				<div class="block3">ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU </div>
			</div>
			<div class="content">Lorem Ipsum dolor sit amet.</div>
			<div class="clear"></div>
		</div>
	</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 11.04.2010, 17:17
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Гомен насай, Aetae. Перечитал тему, и оказалось, что Вы уже предложили практически такое же решение.
Вам в карму при первой возможности идет жирный плюсик
Ответить с цитированием
  #9 (permalink)  
Старый 11.04.2010, 21:03
Аватар для TAILER
Интересующийся
Отправить личное сообщение для TAILER Посмотреть профиль Найти все сообщения от TAILER
 
Регистрация: 06.07.2009
Сообщений: 24

Aetae,
Приводя свой пример, я больше уделил внимание своему примеру, который требует решения, в связи с этим набросал быстрый код. Javascript честно не знаю, поэтому в очередной раз пришел за подсказкой сюда. За HTML и CSS - обидел, ты не прав. Спасибо за подсказку, постараюсь с условием закончить сам.
Ответить с цитированием
  #10 (permalink)  
Старый 11.04.2010, 21:29
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,251

Если знаете html и css то с чего столь ужасный табличный говнокод?) На каждый блок контента по табличке с одной ячейкой - это... извращённо(по сути получается тот же div).
В нём просто даже копаться неприятно, чтоб найти решение. =\

P.S.Так и быть, подсказка: получение элемента с id="adr1", происходит не так: adr1, а так:document.getElementById('adr1'); и это одно из первых чему учится начинающий яваскриптер. Если вы этого не знаете - вы не прочли даже обзорной статьи, и помогать вам вообще нельзя, как злостному тунеядцу.)

Последний раз редактировалось Aetae, 11.04.2010 в 21:38.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Появление блоков div в зависимости от radio Oracool Events/DOM/Window 1 04.12.2009 18:39
Как убрать выделение в Опере у div, получившего фокус ? spa_2002 Opera, Safari и др. 5 03.09.2009 10:42
Границы элемента DIv gosha_kap Общие вопросы Javascript 1 06.07.2009 17:12
Изменение высоты iframe HelpeR Events/DOM/Window 4 22.10.2008 01:24
Динамическое изменение <input text> baal1988 Events/DOM/Window 4 24.08.2008 17:17