CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nick Deny
Nick Deny

Reputation: 127

Text and image height do not match

Text and image height do not match, after refresh - all is well. Thank you for your help!

CodePen

$(document).ready(function() {
  $(window).resize(function() {
    processPost();
  });

  function processPost() {
    $('.post').each(function(i, e) {
      $image = $(e).children('.post-image'),
        $data = $(e).children('.post-data');
      $image.css({
        'background-image': isExist($image.attr('image-url')),
        'height': $data.height(),
      });
    });
  }
  processPost();

  function isExist(data) {
    return `url(${ (data !== undefined && data !== '') ? data : '/data/no-photo.jpg' })`;
  }
});
.post {
  display: table;
  margin: 4% 2%;
  padding: .6em 1em;
  background-color: #fefefe;
  border-radius: 2px;
}
.post-cell, .post-image, .post-data {
  display: inline-table;
}
.post-cell { 
  width: 100%;
}
.post-cell h4, .post-cell p {
  margin: 0;
  padding: .2em 0;
}
.post-cell h4 {
  font-size: 1.5em;
}
.post-cell p {
  color: #d7d7d7;
}
.post-image {
  float: left;
  width: 39%;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  min-height: 100px;
  max-height: 300px;
}
.post-data {
  padding-left: 2%;
  width: 59%;
}
.post-data p {
  margin: 0;
}
.text-right {
  text-align: right !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="post">
  <div class="post-cell">
    <h4>Heading</h4>
  </div>
  <div class="post-image" image-url="http://www.openarium.ru/фото/грузия/тбилиси/дикие-горы-тушети.jpg">
  </div>
  <div class="post-data">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div class="post-cell text-right">
    <p>meta, tag, metatag, meta-tag</p>
  </div>
</div>

Screenshot: [Image Height: 175px, Post Height: 200px]

Screenshot

Upvotes: 0

Views: 184

Answers (2)

Sandra Willford
Sandra Willford

Reputation: 3789

for the record, in your CSS you have 'min-height: 100px;' which is overriding your javascript!

Upvotes: 0

nikulis
nikulis

Reputation: 134

Depending on what additional CSS you have, there may be more work than this, but there are a couple other things that can be addressed first:

  1. jQuery's $(element).height() method returns a number. To this, you need to append the string px, so the value being assigned to the image's height is then a valid CSS length unit.

  2. You probably want to wait until the DOMContentLoaded or similar event, which can also be accessed through jQuery's $(window).ready(callback) function. This will ensure that the text in the DOM is rendered before measuring its height (though this might also change later if you're using external webfonts that take longer to load).

$(window).ready(processPost); // NOTE

function processPost() {
  $('.post').each(function(i, e) {
    $image = $(e).children('.post-image'),
      $data = $(e).children('.post-data');
    $image.css({
      'background-image': isExist($image.attr('image-url')),
      'height': $data.height() + 'px', // NOTE
    });
  });
}


function isExist(data) {
  return `url(${ (data !== undefined && data !== '') ? data : '/data/no-photo.jpg' })`;
}
<!doctype html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div class="post">
    <div class="post-cell">
      <h4>Heading</h4>
    </div>
    <div class="post-image" image-url="http://www.openarium.ru/фото/грузия/тбилиси/дикие-горы-тушети.jpg">
    </div>
    <div class="post-data">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
    <div class="post-cell text-right">
      <p>meta, tag, metatag, meta-tag</p>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions