Photoshop Question posted in
The official user guide can be found here.

Code to match the height of the 3 elements in JS, is this correct? – Photoshop

What I want to do

like this

I tried to make the sentence like if statement:

[ Compare the height of the 3 elements ] → When all are smaller than the height of content:

  • Stretches to the full height of content.
    (justify-content: space-between; or margin: auto;)

→ When it’s greater than content height:
ㅤ→ When of the 3 elements, .middle is the largest:

  • Stretch the other 2 elements (.left and.right) to the full height of content.

ㅤ→ Other than that:

  • Compare the heights of 2 elements other than .middle (.left and .right) and adjust the height of all (3 elements) to the larger one.

Btw, why I want to implement in JS, not CSS:

I already use flexbox.
But I use swiper and have a problem that ① the element of the previous slide jumps to the next slide when the browser width/height is changed & ② it can’t get the correct height.
So I thought it was necessary to use JS in order to “specify” the slide height and have it read into the swiper.

My current code

FullscreenFiddle / JSFiddle

jQuery

function maxHeight() {
  var maxH = 0;
  var contentH = 'calc(100vh - 79px)';
  $(".left, .middle, .right").each(function() {
    if ($(this).height() <= contentH) {
      $(".left, .right").css('justify-content', 'space-between');
      $(".middle").css('height', '100%');
    } else {
      if ($(".middle").height() > $(".left, .right").height()) {
        $(".left, .right").css({
          'height':'calc(' + contentH + ' - 100px)',
          'justify-content':'space-between'
      });
        $(".middle").css('height',contentH);
      } else {
        maxH = $(".left, .right").height();
        $(".left, .middle, .right").height(maxH);
      }
    }
  });
}
mySwiper.height = maxHeight();

Is this code able to express what I wrote in a sentence?

▼ Code only (The code snippet results do not look correct because the reset css is not done)

/* The height alignment is below this. */
/* swiper */
var mySwiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: 'true',
  },
  keyboard: {
    enabled: true,
  },
  mousewheel: {
    forceToAxis: true,
    invert: true,
  },
  renderBullet: function(index, className) {
    return '<span class="' + className + '">' + (index + 1) + '</span>';
  },
});

console.log(mySwiper.height);


/* height alignment */
function maxHeight() {
  var maxh = 0;
  var conh = 'calc(100vh - 79px)';
  $(".left, .middle, .right").each(function() {
    if ($(this).height() <= conh) {
      $(".left, .right").css('justify-content', 'space-between');
      $(".middle").css('height', '100%');
    } else {
      if ($(".middle").height() > $(".left, .right").height()) {
        $(".left, .right").css({
          'height': 'calc(' + conh + ' - 100px)',
          'justify-content': 'space-between'
        });
        $(".middle").css('height', conh);
      } else {
        maxh = $(".left, .right").height();
        $(".left, .middle, .right").height(maxh);
      }
    }
  });
}

mySwiper.height = maxHeight();
/* The content starts around the middle. (There is a mark) */
html {
  font-size: 62.5%;
}

body {
  font-size: 1.5rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  max-height: 100vh;
  color: white;
  background-color: #c6d2dd;
}

.title {
  font-size: 1.4rem;
}

header {
  display: flex;
  position: fixed;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  z-index: 30;
  padding: 2.1rem 4.7rem 6rem 3.5rem;
}
header ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  width: 100%;
  margin-bottom: -1px;
}
header li {
  font-size: 1.5rem;
  height: 4.5rem;
  padding-left: .4rem;
}
header li:first-child {
  padding-left: 1.5rem;
}
header li:last-child {
  padding-right: .5rem;
}
header li > a {
  text-decoration: none;
  display: block;
  padding: 1rem 2rem 1rem 3rem;
  margin-left: -1rem;
  height: 100%;
  color: #fff;
  outline: none;
  transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
  position: relative;
  border-radius: 9px 5px 0 0;
  overflow: hidden;
  position: relative;
  z-index: 5;
}
header li > a:hover {
  transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}
header li > a:hover::before {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.4);
  border-color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
  box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.2);
}
header li > a::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transition: background-color 0.3s ease-in;
  transform: skew(-15deg);
  transform-origin: bottom right;
  border-radius: 5px 0 0 0;
}

.current a {
  border-right: 1px solid #fff;
  border-bottom-width: 0;
  pointer-events: none;
  margin-bottom: -3px;
}
.current a::before {
  border: 1px solid #fff;
  background-color: #9bacbb;
  margin: 0 0 -4px -1px;
}

.logo {
  margin-right: auto;
}

.mb {
  position: relative;
  padding-left: 4.1rem;
}
.mb a {
  display: block;
  height: 20px;
}

.mail {
  display: inline-block;
}

.balloon {
  display: none;
  position: absolute;
  padding-top: 2.5rem;
  right: -1.5rem;
}

.mb a:hover + .balloon {
  display: inline-block;
}

/* -----------------------------
 *     contents (from this)
 *----------------------------*/
.wrap {
  padding: 6.9rem 1rem 0 1rem;
  width: 100%;
  height: 100%;
}

#content {
  position: relative;
  width: 100%;
  height: calc(100% - 7.9rem);
  background: #9bacbb;
  border: 1px solid #fff;
  border-radius: 5px;
  box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, 0.5);
  margin-bottom: 1rem;
}

.swiper-container {
  height: 100%;
}

.swiper-wrapper {
  justify-content: space-between;
  min-height: 100%;
}

.swiper-slide {
  align-items: center;
  height: auto;
}

#abme, #abmm, #abee {
  display: flex;
}

.left, .middle, .right {
  display: flex;
}

.left, .right {
  flex-direction: column;
  margin: 5rem 0;
}

/*  left  */
.left {
  padding: 0 0 0 5.6rem;
  width: 33.5rem;
}

.data {
  padding-top: 1.7rem;
  padding-bottom: 1.7rem;
}

.skill li {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.skill li :last-child {
  margin-right: 0;
}

.code {
  margin-top: 1.7rem;
}

figure {
  display: grid;
  grid-template: 'meter' auto 'name' min-content / 4.4rem;
  grid-row-gap: 0.5rem;
  margin-right: .9rem;
  font-size: 1rem;
}
figure img {
  grid-area: meter;
  align-self: center;
  justify-self: center;
}
figure .meter {
  width: 100%;
}
figure .meter-t {
  width: 50%;
  height: 50%;
}
figure figcaption {
  justify-self: center;
  min-width: 0;
}

.hobby > .data {
  padding-bottom: 0;
}

/*  middle  */
.middle {
  width: 55.2rem;
  flex-grow: 1;
  text-align: center;
  line-height: 0;
  margin-left: 3rem;
  margin-right: 3rem;
}
.middle img {
  flex: 0 1 auto;
  margin: auto;
}

/*  right  */
.right {
  padding: 0 5.6rem 0 0;
  width: 31.1rem;
}

.attributes > p:last-child {
  padding-top: 0;
}

.live > .data {
  position: relative;
  padding: 0;
  width: 19.3rem;
  height: 20.2438rem;
}
.live > .data span {
  position: absolute;
  padding: 0;
  bottom: 30%;
  right: 7%;
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0rem rgba(255, 255, 255, 0.2), 0 0 0 1.5rem rgba(255, 255, 255, 0.2), 0 0 0 3.5rem rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 1.5rem rgba(255, 255, 255, 0.2), 0 0 0 3.5rem rgba(255, 255, 255, 0.2), 0 0 0 8rem rgba(255, 255, 255, 0);
  }
}
.ripple {
  position: absolute;
  padding: 0;
  bottom: 43%;
  left: 44%;
  background-color: #fff;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  animation: ripple 1.5s linear infinite;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>

<!-- The content starts a little below. (There is a mark) -->
<header>
  <a href="" class="logo">
      <img src="https://placehold.jp/0352ab/0352ab/68x41.png" alt="logo" width="68" height="41.125" />
    </a>
  <nav>
    <ul>
      <li class="ALL"><a href="">ALL</a></li>
      <li class="MONO"><a href="">MONO</a></li>
      <li class="KOTO"><a href="">KOTO</a></li>
      <li class="etc"><a href="">etc.</a></li>
      <li class="current"><a href="">ABOUT</a></li>
    </ul>
  </nav>
  <div class="mb">
    <a href="">
        <img src="https://placehold.jp/0352ab/0352ab/29x20.png" alt="mail" width="29" />
      </a>
    <img class="balloon" src="https://placehold.jp/0352ab/0352ab/101x150.png" alt="balloon" width="101" />
  </div>
</header>

<!-- from this -->
<div class="wrap">
  <div id="content">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <!-- page 1 -->
        <div class="swiper-slide">
          <div id="abme">
            <div class="left">
              <section class="name">
                <p class="title">あいあ</p>
                <p class="data">あいあいあいあい</p>
              </section>
              <section class="spec">
                <p class="title">あいあい</p>
                <p class="data">あいあいいあいあいあいあいあいあい</p>
              </section>
              <section class="skill">
                <p class="title">あいあ</p>
                <ul class="data">
                  <li class="tool">
                    <figure class="Illustrator">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221627.png" alt="advanced" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221624.png" alt="Illustrator" />
                      <figcaption>Illustrator</figcaption>
                    </figure>
                    <figure class="Photoshop">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221753.png" alt="Photoshop" />
                      <figcaption>Photoshop</figcaption>
                    </figure>
                    <figure class="Indesign">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221719.png" alt="Indesign" />
                      <figcaption>Indesign</figcaption>
                    </figure>
                    <figure class="Vectorworks">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221747.png" alt="Vectorworks" />
                      <figcaption>Vectorworks</figcaption>
                    </figure>
                    <figure class="Shade">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221750.png" alt="Shade" />
                      <figcaption>Shade</figcaption>
                    </figure>
                  </li>
                  <li class="code">
                    <figure class="HTML">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221722.png" alt="HTML" />
                      <figcaption>HTML</figcaption>
                    </figure>
                    <figure class="CSS">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221725.png" alt="CSS" />
                      <figcaption>CSS</figcaption>
                    </figure>
                    <figure class="Javascript">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221717.png" alt="Javascript" />
                      <figcaption>Javascript</figcaption>
                    </figure>
                    <figure class="PHP">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221714.png" alt="PHP" />
                      <figcaption>PHP</figcaption>
                    </figure>
                  </li>
                </ul>
              </section>
              <section class="hobby">
                <p class="title">あいあ</p>
                <p class="data">あいあいあいあいあいあいあいあいあいあいあいあいあ</p>
              </section>
            </div>

            <div class="middle">
              <img class="aboutImage" src="https://placehold.jp/0352ab/0352ab/411x479.png" alt="me" width="411" />
            </div>

            <div class="right">
              <section class="attributes">
                <p class="title">あいあいいあ</p>
                <p class="data">あいあいあいあい</p>
                <p class="data">ああいいあいあいあいあ<br> 青々青々青々ああいあいあいあいあ
                  <br> あいあいあい居合いあいあいあいあい
                  <br> あいあいいあいあい
                  <br>
                  <br> あいあいあいあいあいあいああい
                  <br> あいあいあいあいあいあいあいあいあい
                </p>
              </section>
              <section class="live">
                <p class="title">あいあ</p>
                <div class="data">
                  <img src="https://placehold.jp/0352ab/0352ab/193x202.png" width="193" />
                  <span class="data">あいあ</span>
                  <div class="ripple"></div>
                </div>
              </section>
            </div>

          </div>
        </div>


        <!-- page 2 -->
        <div class="swiper-slide">
          <div id="abmm">
            <div class="left">
              <section class="mm">
                <p class="title">あいあい</p>
                <p class="data">青々青々あいあいあいあ<br> あいあいあいあいあ
                  <br>
                  <br> あい居合いあいあいいいいいいいいいいいいいいいいいいいいいいいいいいいいああああああ
                </p>
              </section>
              <section class="Q">
                <p class="title">あいあいいあいあいあ</p>
                <p class="data"><br> あいいいいいいいいいいいいいいいいいいいいいいいいいいいいああああああああああああああああああああああああああああああああああい
                </p>
              </section>
            </div>

            <div class="middle">
              <img class="aboutImage" src="https://placehold.jp/0352ab/0352ab/411x411.png" alt="What's that?" width="411" />
            </div>

            <div class="right">
              <section class="theme">
                <p class="title">ああい</p>
                <p class="data">居合いあいあい<br>
                  <br> あいあいあいあいあいあいあいああああああああああああああああああああああああああ
                </p>
              </section>
            </div>

          </div>
        </div>


        <!-- page 3 -->
        <div class="swiper-slide">
          <div id="abee">
            <div class="left">
              <section class="ee">
                <p class="title">あいあいあいあいあ</p>
                <p class="data">あいあいあいあいあいあいあいいいあい<br> 青々青々あい
                  <br> 青々ああああああああああああああああああああああああああああああああああああああああああああああ
                </p>
              </section>
            </div>

            <div class="middle">
              <img class="aboutImage" src="https://placehold.jp/0352ab/0352ab/411x76.png" alt="What's this?" width="411" />
            </div>

            <div class="right"></div>

          </div>
        </div>

      </div>
      <!-- /swiper-wrapper -->
    </div>
    <!-- /swiper-container -->
  </div>
  <!-- /content -->
</div>
<!-- /wrap -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
Tags:

2

Answers


  1. 0

    Did you trying using matchHeight script? https://github.com/liabru/jquery-match-height

    You can do something like:

    <div data-mh="myheight"></>
<div data-mh="myheight"></>
<div data-mh="myheight"></>

    Or in JS file

    $(function() {
    $('.item').matchHeight(options);
});
    Login or Signup to reply.
  2. 0

    You don’t need javascript to achieve what you need.
    Let’s take a look at your conditions:

    Compare the height of the 3 elements
→ When all are smaller than the height of content:
  Stretches to the full height of content.

    Result 1: All 3 elements with the same height of the content.

     → When it's greater than content height:
   → When of the 3 elements, .middle is the largest:
     Stretch the other 2 elements (.left and.right) to the full height of content.

    Result 2: All 3 elements with the same height of the content.

    → Other than that:
  Compare the heights of 2 elements other than .middle (.left and .right) and 
  adjust the height of all (3 elements) to the larger one.

    Result 3: All 3 elements with the same height of the content. This one is a little tricky but remember that all elements are child of the content <div>

    So as you can see you just need to set all elements to the same size as their parent div (content) and make sure that the content minimum height is equal to the window vh (vertical height). All of this can be achieved with simple CSS.

    The greatest problem for your question is to get rid of all code that’s not relevant to this issue.

    .wrap {
  width: 100%;
  height: 100%;
}

#content {
  position: relative;
  width: 100%;
  min-height: 100vh;
  border-radius: 5px;
}

.swiper-container, 
.swiper-wrapper,
.swiper-slide {
  min-height: 100vh;
}

.swiper-wrapper {
  justify-content: space-between;
}

.swiper-slide {
  align-items: center;
}

#abme,
#abmm,
#abee {
  min-height: 100vh;
  display: flex;
}
.middle,
.left,
.right {
  border: 1px solid red;
  margin: 1rem 0;
}

.left,
.right {
  display: flex;
  flex-direction: column;
}

/*  left  */

.left {
  padding: 0 0 0 0.6rem;
  width: 33.5rem;
}

.data {
  padding-top: 1.7rem;
  padding-bottom: 1.7rem;
}

.skill li {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.skill li:last-child {
  margin-right: 0;
}

.code {
  margin-top: 1.7rem;
}
figure {
  display: grid;
  grid-template: 'meter' auto 'name' min-content / 4.4rem;
  grid-row-gap: 0.5rem;
  margin-right: .9rem;
  font-size: 1rem;
}
figure img {
  grid-area: meter;
  align-self: center;
  justify-self: center;
}
figure .meter {
  width: 100%;
}
figure .meter-t {
  width: 50%;
  height: 50%;
}
figure figcaption {
  justify-self: center;
  min-width: 0;
}
.hobby>.data {
  padding-bottom: 0;
}

/*  middle  */
.middle {
  width: 55.2rem;
  flex-grow: 1;
  text-align: center;
  margin-left: 1rem;
  margin-right: 1rem;
}
.middle img {
  flex: 0 1 auto;
  margin: auto;
}
.middle p {
  float: none
}

/*  right  */
.right {
  padding: 0 0.6rem 0 0;
  width: 31.1rem;
}
.attributes>p:last-child {
  padding-top: 0;
}
    <!-- from this -->
<div class="wrap">
  <div id="content">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <!-- page 1 -->
        <div class="swiper-slide">
          <div id="abme">
            <div class="left">
              <section class="name">
                <p class="title">Title</p>
                <p class="data" contentEditable>Content editable</p>
              </section>
            </div>

            <div class="middle">
              <p><img class="aboutImage" src="https://placehold.jp/0352ab/0352ab/400x200.png" alt="me" width="411" /></p>
              <p contentEditable>Content editable</p>
            </div>

            <div class="right">
              <section class="attributes">
                <p class="title">Title</p>
                <p class="data" contentEditable>Content editable</p>
              </section>
            </div>

          </div>
        </div>
        <!-- /page1 -->


      </div>
      <!-- /swiper-wrapper -->
    </div>
    <!-- /swiper-container -->
  </div>
  <!-- /content -->
</div>
<!-- /wrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search