Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как узнать реальную высоту контента div с overflow:hidden ? (https://javascript.ru/forum/jquery/70602-kak-uznat-realnuyu-vysotu-kontenta-div-s-overflow-hidden.html)

Black_Star 18.09.2017 22:13
Как узнать реальную высоту контента div с overflow:hidden ?
 
Добрый день уважаемые. Столкнулся с такой задачей. Как узнать высоту контента, если у родителя стоит 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) но чёт пока положительных результатов не получил

рони 18.09.2017 22:21
Black_Star,
this.scrollHeight

рони 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 18.09.2017 22:52
рони,
получается ему надо сразу все кнопки захайдить.

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

рони 18.09.2017 23:22
Black_Star,
один в один :)

Black_Star 19.09.2017 12:21
Цитата:
Сообщение от рони (Сообщение 464820)
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 19.09.2017 12:29
Black_Star,
убери свой код с btn

Black_Star 19.09.2017 12:48
Цитата:
Сообщение от Rasy (Сообщение 464843)
Black_Star,
убери свой код с btn
Понял, спасибо, а как вообще вывести размер внутренних контентов?
https://jsfiddle.net/md2uwbxe/1/
$(".content").each(function(i,el){
          var innerHeight =  $(el).children().scrollHeight;
          alert(innerHeight + " = innerHeight");
      });

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

Rasy 19.09.2017 13:35
Цитата:
Сообщение от Black_Star
не отрабатывает почему то
Так ты ведь узнаешь высоту для обертки. Удали метод children() и св-во scrollHeight есть у объекта Element - нативного яваскрипта, т.е не у либы jQuery.


Часовой пояс GMT +3, время: 18:51.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице