0

I have two columns each with two overlapping divs. If you click the front div, it fades out and the back div appears.

Then the back div has to set it's height to auto if it has overflowing content and remain it's height when it doesn't. The wrapper (.thumb) also changes height depending on the back div's height.

The code inside the if statement works, but it doesn't seem to check the condition. It also executes the code when the content doesn't overflow the div, so it sets height to auto here as well, making the div smaller. I want the div without overflow to keep its original height.

I put the heights of both the outerHeight and scrollHeight to the console to check which heights it reads. The div without overflow says its outerheight is bigger than scrollHeight, so it should not execute the if statement. I put the else statement in there to check if it executes the console.log(), but it doesn't.

I don't understand what's wrong with my code. Here is je JSfiddle: https://jsfiddle.net/Isoldhe/5scfqzzh/33/

HTML:

<div class="main">
<div class="container">

  <div class="row">
      <div class="thumb col-sm-6">
        <div class="front"></div>
        <div class="back">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque fecimus. Quorum sine causa fieri nihil putandum est. Hoc ne statuam quidem dicturam pater aiebat, si loqui posset. Quibusnam praeteritis? Quod si ita sit, cur opera philosophiae sit danda nescio. An hoc usque quaque, aliter in vita? An, partus ancillae sitne in fructu habendus, disseretur inter principes civitatis, P.</p>
        </div>
      </div>

      <div class="thumb col-sm-6">
        <div class="front"></div>
        <div class="back">
          <p>Lorem ipsum dolor...</p>
        </div>
      </div>

  </div>
</div>
</div>

CSS:

.main {
  width: 100%;
  position: relative;
}

.thumb {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150px;
}

.front {
  position: absolute;
  background: blue;
  width: 150px;
  height: 100px;
  padding: 10px;
  z-index: 10;
  border-radius: 15px;
  border: 3px solid rgb(163, 0, 0);
  cursor: pointer;
}

.back {
  position: absolute;
  background: green;
  width: 150px;
  height: 100px;
  font-size: 1em;
  text-align: center;
  border-radius: 15px;
  z-index: 9;
  padding: 10px;
  border: 3px solid rgb(163, 0, 0);
  overflow: hidden;
}

JS:

$('.front').click(function() {
    $(this).fadeOut(500);

    var $back = $(this).siblings('.back');
    var $thumb = $(this).parent('.thumb');

    console.log($back.outerHeight());
    console.log($back.prop('scrollHeight'));

    if ($($back.outerHeight() < $back.prop('scrollHeight'))) {
      $back.height('auto'); // changes height so all content is visible
      $thumb.height($($back).height() + 60); // changes thumb height to whatever the back div height is + adds some margin
    }
    else {
      console.log('outerHeight is bigger than scrollHeight');
    }

});
4

1 回答 1

0

The problem you have is the first $ in if ($($back.outerHeight() < $back.prop('scrollHeight'))) {

It should be : if ($back.outerHeight() < $back.prop('scrollHeight')) {

Demo here

于 2017-10-23T11:03:17.587 回答