jQuery

【jQuery】レイヤーの高さを動的にチェックし、最大の高さ値と比較するDynamic max height

October 21, 2017
Dynamic max height plugin for jQuery

Dynamic max heightはレイヤーの高さを動的にチェックし、高さの値と比較するjQueryプラグイン

Javascript

<script src="path/to/file/jquery.dynamicmaxheight.min"></script>
 <script>
    $('.dynamic-max-height').dynamicMaxHeight();
 </script>

HTML

<div class="js-dynamic-height" data-maxheight="70">
    <div class="dynamic-height-wrap">
      <p> My life fades. The vision dims. All that remains are memories. I remember a time of chaos... ruined dreams... this wasted land. But most of all, I remember The Road Warrior. The man we called "Max." To understand who he was, you have to go back to another time... when the world was powered by the black fuel... and the desert sprouted great cities of pipe and steel. Gone now... swept away. For reasons long forgotten, two mighty warrior tribes went to war, and touched off a blaze which engulfed them all. Without fuel they were nothing. They'd built a house of straw. The thundering machines sputtered and stopped. Their leaders talked and talked and talked. But nothing could stem the avalanche. Their world crumbled. </p>
    </div>
    <button class="js-dynamic-show-hide button" title="Show more" data-replace-text="Show less">Show more</button>
</div>

CSS

.dynamic-height-wrap {
  overflow: hidden;
  position: relative;
  transition: max-height 0.25s ease-in-out;
  width: 100%;
}

/* Bottom gradient (optional, but recommended)*/
.dynamic-height-active .dynamic-height-wrap:before {
  background: linear-gradient(to bottom,  rgba(240,249,255,0) 0%,rgba(255,255,255,1) 100%);
  bottom: 0;
  content:'';
  height: 30px;
  left: 0;
  position: absolute;
  right: 0;
  z-index: 1;
}

.dynamic-height-active .dynamic-show-more {
  display: inline-block;
}

.dynamic-show-more {
  display: none;
}

MIT