jQuery While Loop to Increase Div Width if Height Greater than X

user_2638855 0
Viewed 72

I'm trying to dynamically increase the width of a div to fit the text perfectly so that the text is always 100% height of the div. I'm trying to do a while loop like so:

HTML

 <div class="container">
    <div class="overlay">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor lacus ac ligula porta, eu venenatis neque iaculis. Ut maximus arcu justo, sed rutrum sapien mattis vel. Nunc vitae lacus pellentesque, hendrerit diam non, vestibulum libero. Praesent imperdiet odio ac lorem laoreet, ut lobortis ex finibus. Aenean sed turpis libero. Fusce consectetur arcu erat, non mattis dolor ullamcorper nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus dignissim sapien hendrerit iaculis. Pellentesque dignissim.
    </p>
    </div>
    </div>

CSS

.container {
  width: 100%;
  height: 200px;
  position: relative;
  background: #fff;
  overflow: hidden;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: #f7f7f7;
  color: #000;
}

jQuery

  jQuery(document).ready(function($) {
    var width = $('overlay').width();
    while($('.overlay p').height() > 200) {
      $('.overlay').width(width);
      width++;
    }
  });

This is running a continuous loop that never stops. The idea is to check the width and continue to increase it until the height of the text is less than 200px.

css jquery
1 Answers

Your initial width is not well initialized (you forget the dot):

jQuery(document).ready(function($) {
  var width = $('.overlay').width();

  while ($('.overlay p').height() > 200) {
    $('.overlay').width(width);
    width++;
  }
  console.log($('.overlay').width(),$('.overlay p').height())
});
.container {
  width: 100%;
  height: 200px;
  position: relative;
  background: #fff;
  overflow: hidden;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: #f7f7f7;
  color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="overlay">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor lacus ac ligula porta, eu venenatis neque iaculis. Ut maximus arcu justo, sed rutrum sapien mattis vel. Nunc vitae lacus pellentesque, hendrerit diam non, vestibulum libero. Praesent
      imperdiet odio ac lorem laoreet, ut lobortis ex finibus. Aenean sed turpis libero. Fusce consectetur arcu erat, non mattis dolor ullamcorper nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus dignissim sapien hendrerit
      iaculis. Pellentesque dignissim.
    </p>
  </div>
</div>

user_73807790
Related