Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.12.2011, 09:16
Новичок на форуме
Отправить личное сообщение для newcoder Посмотреть профиль Найти все сообщения от newcoder
 
Регистрация: 20.02.2011
Сообщений: 4

Изменить высоту одного элемента вычтя ее из другого
Прошу помощи с одной интересной но небольшой задачей (помоему 2-3 строчки кода )
Необходимо взять высоту у img, вычесть из нее 26px и подставить к div с классом image-wrap. (чтобы получилось как в коде ниже
<ul class="news-list">
	<li>
		<div class="image-wrap" style="height:356px;">
			<div class="image-holder">
				<img src="images/img02.jpg" alt="" width="225" height="382" />
			</div>
		</div>
	</li>
	<li>
		<div class="image-wrap" style="height:241px;">
			<div class="image-holder">
				<img src="images/img01.jpg" alt="" width="224" height="267" />
			</div>
		</div>
	</li>
</ul>


Я так понимаю нужно что то там each('li') img взять ширину, как то вычесть 26 и присвоить блоку .image-wrap в текущем LI получившееся значение, и потом далее, по циклу со следующим LI тоже самое. Но мои скудные знания в Jquery не позволяют мне воплотить это в реальность ((
Буду рад если кто нибудь из профи поможет, в гугле искал, похожего примера не нашел, обычно сам разбираюсь.
Ответить с цитированием
  #2 (permalink)  
Старый 17.12.2011, 12:11
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,121

Сообщение от newcoder
взять высоту у img, вычесть из нее 26px и подставить к div с классом image-wrap
Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(window).load(function (){
	$('.news-list img').each(function (){
		var h=(this.offsetHeight-26)+'px';
		//$(this.parentNode.parentNode).css('border','1px solid red');
		$(this.parentNode.parentNode).css('height',h);
	});
});
</script>
</head>
<body>
<ul class="news-list">
	<li>
		<div class="image-wrap" style="height:356px;">
			<div class="image-holder">
				<img src="images/img02.jpg" alt="" width="225" height="382" />
			</div>
		</div>
	</li>
	<li>
		<div class="image-wrap" style="height:241px;">
			<div class="image-holder">
				<img src="images/img01.jpg" alt="" width="224" height="267" />
			</div>
		</div>
	</li>
</ul>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 17.12.2011, 15:19
Новичок на форуме
Отправить личное сообщение для newcoder Посмотреть профиль Найти все сообщения от newcoder
 
Регистрация: 20.02.2011
Сообщений: 4

Вот это красавчик)) Спасибо большое дружище! ты оправдал мои надежды, реально 2-3 строчки кода, спасибо большое, все логично и понятно.
Ответить с цитированием
  #4 (permalink)  
Старый 17.12.2011, 15:39
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,489

А почему не сделать это на css?
margin-top:-26px
и всё.
__________________
29375, 35
Ответить с цитированием
  #5 (permalink)  
Старый 09.02.2015, 00:06
Новичок на форуме
Отправить личное сообщение для ZakharV Посмотреть профиль Найти все сообщения от ZakharV
 
Регистрация: 08.02.2015
Сообщений: 1

Сообщение от ksa Посмотреть сообщение
Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(window).load(function (){
	$('.news-list img').each(function (){
		var h=(this.offsetHeight-26)+'px';
		//$(this.parentNode.parentNode).css('border','1px solid red');
		$(this.parentNode.parentNode).css('height',h);
	});
});
</script>
</head>
<body>
<ul class="news-list">
	<li>
		<div class="image-wrap" style="height:356px;">
			<div class="image-holder">
				<img src="images/img02.jpg" alt="" width="225" height="382" />
			</div>
		</div>
	</li>
	<li>
		<div class="image-wrap" style="height:241px;">
			<div class="image-holder">
				<img src="images/img01.jpg" alt="" width="224" height="267" />
			</div>
		</div>
	</li>
</ul>
</body>
</html>
Сообщение от ksa
Как вариант...
Здравствуйте, устал гуглить, нашел данный пример! Ну почти то, что надо, но не совсем. Тут в примере картинка, а у меня два блока. Левый с классом panel и правый с классом panel-body. Как можно можно решить эту же задачку, но чтобы высота(в смысле в css min-height ) правого блока panel-body плюс высота (height) от блока с классом panel.
Что-то вроде формулы:
min-height: от панель "panel-body" = height от панель "panel-body" + height от "panel"

З.ы. Возможно придется добавить id к классам Заранее спасибо.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Можно ли средствами JS узнать высоту скрытого элемента? ацкий Общие вопросы Javascript 7 24.08.2011 19:07
Существует ли скрипт, который рисует стрелки от одного элемента DOM к другому? FINoM Элементы интерфейса 4 15.05.2011 21:23
Браузер не успевает определить высоту вновь созданного через XMLHttpRequest элемента Lockpickup AJAX и COMET 17 25.04.2011 17:58
Как изменить свойство css у всех элементов одного класса AlexJ Events/DOM/Window 7 19.03.2011 06:25
Скопировать обработчики событий с одного элемента на другой. Jurasmi Events/DOM/Window 3 10.11.2010 19:03