Форум

Black_Star · #1 (**permalink**) 18.09.2017, 22:13

Добрый день уважаемые. Столкнулся с такой задачей. Как узнать высоту контента, если у родителя стоит position:relative: overflow:hidden и указана некая фиксированная высота. Приведу простенький примерчик для наглядности.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>	
	<style>
	.mainBlock {
		width: 100%;
	}

	h1 {
		font-size: 20px;
	}

	.wrapper_block {
		position: relative;
		width: 100%;
		border: 1px solid #000;
	}

	.content {
		position: relative;
		width: 80%;

		height: 120px;
		min-height: 120px;

		overflow: hidden;
		list-style-type: none;
		border: 1px solid #f00;
	}

	.content_active {
		height: auto !important;
	}

	.item {
		width: 100%;
		margin: 5px 0;
		border: 1px solid #333;
	}

	.item:nth-child(odd) {
		background-color: #ff0;
	}

	.btn_showMore {
		width: 200px;
		height: 40px;
		margin: 10px auto;
		background-color: #00f;
		color: #fff;
		text-transform: uppercase;
		cursor: pointer;
	}

</style>

</head>
<body>
	<div class="mainBlock">
		<h1>ExanpleMenu</h1>
		<div class="wrapper_block">

			<div class="block1">
				<h2>Item1</h2>
				<ul class="content">
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
					</li>
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
					</li>
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur
					</li>
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
					</li>
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing
						elit. A autem amet ratione iure, sed voluptate!
					</li>
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit
					</li>
				</ul>
				<button type="button" class="btn_showMore">Show more</button>
			</div>

			<div class="block2">
				<h2>Item2</h2>
				<ul class="content">
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
					</li>
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
					</li>
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing
						elit. A autem amet ratione iure, sed voluptate!
					</li>
				</ul>
				<button type="button" class="btn_showMore">Show more</button>
			</div>

			<div class="block3">
				<h2>Item3</h2>
				<ul class="content">
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
					</li>
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
					</li>
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur
					</li>
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
					</li>
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
					</li>
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur
					</li>
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
					</li>
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
					</li>
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur
					</li>
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
					</li>
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing
						elit. A autem amet ratione iure, sed voluptate!
					</li>
					<li class="item">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit
					</li>
				</ul>
				<button type="button" class="btn_showMore">Show more</button>
			</div>

		</div>

	</div>

	<script>
		$(document).ready(function () {

			var btn = $(".btn_showMore");
			btn.on("click", function() {
				$(this).siblings(".content").toggleClass("content_active");
			});


		})
	</script>

</body>
</html>

Допустим имеются некие блоки с контентом разной величины и содержания, (Видио контент, описание товаров, список отзывов и тд.)
У каждого из этих блоков есть обертка по высоте в height: 120px; (что б значиться красиво было) и есть кнопка для любопытных. -> Нажми и увидишь подробности. А теперь вопрос - Как сделать так что б если внутреннего контента меньше чем эти 120px кнопка не отображалася, в остальных же случаях она имелась бы в наличии. (Естественно надо учитывать что по ширине ограничений нету, и при малых разрешениях браузера наш контент будет по высоте больше чем на стационарных компах).

PS Пробовал через .outerHeight(true) но чёт пока положительных результатов не получил

рони · #2 (**permalink**) 18.09.2017, 22:21

Black_Star,
this.scrollHeight

рони · #3 (**permalink**) 18.09.2017, 22:30

Black_Star,

$(function () {
      $(".content").each(function(i,el){
            $(el).next().toggle(el.scrollHeight > 120).on("click", function() {
        $(el).toggleClass("content_active");
      });
      });
    })

Rasy · #4 (**permalink**) 18.09.2017, 22:52

рони,
получается ему надо сразу все кнопки захайдить.

рони · #5 (**permalink**) 18.09.2017, 23:02

Rasy,
можно создавать кнопки, по мере надобности ...

рони · #6 (**permalink**) 18.09.2017, 23:22

Black_Star,
один в один

Black_Star · #7 (**permalink**) 19.09.2017, 12:21

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

Black_Star,

$(function () {
      $(".content").each(function(i,el){
            $(el).next().toggle(el.scrollHeight > 120).on("click", function() {
        $(el).toggleClass("content_active");
      });
      });
    })

https://jsfiddle.net/md2uwbxe/

Чёт ни очень рабочее, теперь остальные кнопочки не кликабельные.

Rasy · #8 (**permalink**) 19.09.2017, 12:29

Black_Star,
убери свой код с btn

Black_Star · #9 (**permalink**) 19.09.2017, 12:48

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

Black_Star,
убери свой код с btn

Понял, спасибо, а как вообще вывести размер внутренних контентов?
https://jsfiddle.net/md2uwbxe/1/

$(".content").each(function(i,el){
          var innerHeight =  $(el).children().scrollHeight;
          alert(innerHeight + " = innerHeight");
      });

не отрабатывает почему то

Rasy · #10 (**permalink**) 19.09.2017, 13:35

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

не отрабатывает почему то

Так ты ведь узнаешь высоту для обертки. Удали метод children() и св-во scrollHeight есть у объекта Element - нативного яваскрипта, т.е не у либы jQuery.

Форум

Справочник

Discord чат

Курсы javascript