要素に合わせて高さを調整する（クリック式スライドショー➁）。jQuery技術➀－➁。

2017年02月12日

前回ご紹介いたしましたレスポンシブ対応のクリック式スライドショー！プラグインを使わないjQuery技術➀では、単純に要素の移動と色の追加しか行っていませんでしたが、
実際に使用する場面では中の要素に応じて高さの調節をしたいという場合がほとんどだと思います。

そこで今回は、
クリックして表示される要素の高さに応じて自動的に高さを取得し、指定する記述も組み込んでみました！

まずはデモページを！

要素の移動と高さの変化が分かりやすいようにHTMLとCSSの記述を若干変更しています。

クリック式スライドショーのサンプルページ

HTMLの記述

前回と同様に、イベントのトリガーであるlistにはeTriggerというクラス名を。
スライドショー部分は一番外側（親要素）のdivにはwindowというクラス名、スライドで動く要素にはwrap、
中身の子要素には高さをhGetという共通のクラス名を指定しておきます！
（クラス名はご自由に付けて下さい。）

<div id="wrapper">
	<h1>表示されている要素の高さを取得</h1>
	<header></header>
	<ul>
		<li class="eTrigger">STEP1</li>
		<li class="eTrigger">STEP2</li>
		<li class="eTrigger">STEP3</li>
		<li class="eTrigger">STEP4</li>
		<li class="eTrigger">STEP5</li>
	</ul>
	<div class="window">
		<div class="wrap">
			<div class="one hGet">
				<div class="inner01">
					<h2>1</h2>
				</div>
			</div>
			<div class="two hGet">
				<div class="inner02">
					<h2>2</h2>
				</div>
			</div>
			<div class="three hGet">
				<div class="inner03">
					<h2>3</h2>
				</div>
			</div>
			<div class="four hGet">
				<div class="inner04">
					<h2>4</h2>
				</div>
			</div>
			<div class="five hGet">
				<div class="inner05">
					<h2>5</h2>
				</div>
			</div>
		</div>
	</div>
	<footer></footer>
</div>

CSSの記述

今回は動きが分かりやすいようにbody直下のwrapperに対してoverflow:hiddenを指定していますが、
こちらはサイトのデザインによって好きな部分に追加してください。
（付けなくても要素が見えるだけで問題はありません。）

* {
	padding: 0;
	margin:0;
	box-sizing: border-box;
}
#wrapper {
	width: 80%;
	height: 100vh;
	margin: 0 auto;
	overflow: hidden;
}
header {
	height: 50px;
}
ul {
	list-style: none;
	letter-spacing: -1rem;
}
li {
	text-align: center;
	width: 20%;
	display: inline-block;
	letter-spacing: 0;
	padding: 10px 0;
	border:1px solid #f00;
	background-color:#f66;
	color:#fff;
	cursor: pointer;
}
.window {
	width: 50%;
	margin: 0 auto;
	position: relative;
}
.wrap {
	width: 100%;
	position: absolute;
	top:0;
	left: 0;
}
.hGet {
	width: 100%;
	position: absolute;
	top:0;
}
.hGet h2 {
	font-size: 100px;
	text-align: center;
	margin: 10px auto;
}
.one {
	left: 0;
	height: 300px;
}
.two {
	left: 100%;
	height: 400px;
}
.three {
	left: 200%;
	height: 250px;
}
.four {
	left: 300%;
	height: 150px;
}
.five {
	left: 400%;
	height: 350px;
}
.inner01,.inner02,.inner03,.inner04,.inner05 {
	width: 70%;
	height: 70%;
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}
.inner01 {
	background-color: hsla(0,100%,50%,0.8);
}
.inner02 {
	background-color: hsla(50,100%,50%,0.8);
}
.inner03 {
	background-color: hsla(100,100%,50%,0.8);
}
.inner04 {
	background-color: hsla(150,100%,50%,0.8);
}
.inner05 {
	background-color: hsla(200,100%,50%,0.8);
}
footer {
	border: 1px solid #000;
	background-color: #ccc;
	height: 400px;
}
.colorAdd {
	border:1px solid #00f;
	border-bottom:4px solid #00f;
	background-color: #3cf;
}

jQueryの記述

＜jQueryは3.1.0.min.jsを使用しております。＞

前回の記述に加え、高さを取得するためのhFindというクラス名の追加・削除などの記述を加えてあります。

※2017年3月19日、一部記述を修正しました。

$(window).on('load resize',function(){
	var eventTarget = $('.wrap');//スライドを起こしたい要素
	var eventTrigger = $('.eTrigger');//イベントの引き金となる要素
	var slideWidth = 100;//スライドさせたい幅（今回は要素の横幅１００％分を動かしたい）
	var unit = '%';//スライド幅の単位
	var animateTime = 500;//スライドアニメーションの設定時間

	//高さの調整
	var parentDiv = $('.window');//高さを与える要素
	var hGet = $('.hGet');//高さを持っている要素
	var childrenH;//height設定用変数の宣言

	if(!eventTrigger.hasClass('colorAdd'))//ロード時のみ１つ目の要素にクラスを追加・高さを取得
	{
		eventTrigger.eq(0).addClass('colorAdd');

		childrenH = hGet.eq(0).outerHeight();//一つ目の要素の高さを取得（marginを含めた）
		parentDiv.css({height:childrenH});//一つ目の要素の高さを親要素に指定
	}
	else//リサイズ時はhFindというクラスを持つ要素の高さを取得
	{
		childrenH = $('.hFind').outerHeight();//高さを取得（marginを含めた）
		parentDiv.css({height:childrenH});//要素の高さを親要素に指定
	}

	eventTrigger.off('click');//イベントの重複を避けるためにクリックイベントの打ち消し

	eventTrigger.on('click',function(){
		var numver = $(this).index();//クリックされた要素のindex番号を取得
		eventTarget.animate({left:-slideWidth * numver + unit},animateTime);

		if($(this).hasClass('colorAdd')){
			return;
		}else{
			$('.colorAdd').removeClass('colorAdd');
			$(this).addClass('colorAdd');

			$('.hFind').removeClass('hFind');
			hGet.eq(numver).addClass('hFind');
		}

		//クリックした要素の番号と同じindex番号を持つ子要素の高さを設定
		childrenH = $('.hFind').outerHeight();//高さを取得（marginを含めた）
		parentDiv.css({height:childrenH});//要素の高さを親要素に指定
	});

});

ロード時のみ、１つ目の要素の高さを取得して親要素に指定。

クリックされたら高さを取得するためにhFindというクラスを追加し、その要素の高さを取得して親要素に指定。

リサイズされたらhFindのクラスを持っている要素の高さをリサイズされるたびに取得して、その都度親要素に指定。

少し記述が長くなってしまいましたが、汎用性の高いものに仕上がっていると思います。
使用時は変数の中身を変更していただければ簡単に実装できると思います。

以上、
高さの調節も行うクリック式スライドショーのご紹介でした！