Equal height with jquery? - Twitter bootstrap

ani_css
June 15, 2017
262 views
0 votes
2 Answers

Friends,
I have a little project and two columns in my div and I want to make equal these divs if right div bigger than left div so I wrote a code for that it’s work as I want but in my project it’s not going to work properly why I didn’t understand.

and I want to share my demo

CodePen Demo

and in my project

as you see my image height is: 169px and my right divs height is: 193px so where is my mistake you think ?

function getListHeight() {
    $(".tur-list .col-lg-5 img").each(function() {
        var getTurHeight = $(this).parents(".tur-list").find(".col-lg-7").outerHeight();
        var getLeftHeight = $(this).parents(".tur-list").find(".col-lg-5 img").outerHeight();
        if (getTurHeight > getLeftHeight) {
            $(this).outerHeight(getTurHeight);
        }
    });
}
$(document).ready(function(){
  getListHeight();
});

.box{
  width:700px;
  margin:30px auto;
}
.tur-list{
  border:1px solid #ccc;
  margin-bottom:15px;
}
img{
width:100%
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="box">

<div class="box">

<div class="tur-list">
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
     <figure>
       <img src="http://content.anitur.com/web/images/240x220/2016-12/yurtdisi_tur_Sq4MvAMnDGjz7rAgEaOIbalkan-sehirleri-turu-4.jpg"/>
      </figure>
    </div>
    <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
      <div class="tur-list-title">
        <h3>This is the title</h3>
        <p>p of title</p>
      </div><!-- title -->
      
      <div class="tur-location">
        <p>Netherlands</p>
      </div><!-- location-->
      
      <div class="tur-list-detay">
        <p>some details here</p>
      </div><!-- detail-->
      
      <div class="tur-bottom-detay">
        <a href="#">Link of box</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis unde voluptatibus ea, possimus totam blanditiis molestiae doloremque ipsa magni maiores fugit? Impedit expedita aspernatur dignissimos ipsa consectetur accusamus praesentium, saepe, fugit incidunt doloribus. Maxime expedita nesciunt, magni accusamus culpa saepe cupiditate tempora cum soluta natus, ea illo quo! Nulla error repudiandae natus vel dicta sequi molestias, possimus optio a dolore laboriosam eligendi impedit nam dolorum! Temporibus necessitatibus alias ullam reiciendis ipsam id quisquam, repudiandae? Quas doloremque, laboriosam quaerat sed veniam, dolores ea aspernatur velit, accusamus eligendi soluta rerum architecto cum fuga? Explicabo assumenda quisquam laudantium quae laborum voluptatem alias harum!</p>
      </div><!-- bottom detail-->
    
    </div>
  </div>
</div>
  
  <div class="tur-list">
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
      <figure>
      <img src="http://content.anitur.com/web/images/240x220/2016-12/yurtdisi_tur_Sq4MvAMnDGjz7rAgEaOIbalkan-sehirleri-turu-4.jpg"/>
      </figure>
    </div>
    <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
      <div class="tur-list-title">
        <h3>This is the title</h3>
        <p>p of title</p>
      </div><!-- title -->
      
      <div class="tur-location">
        <p>Netherlands</p>
      </div><!-- location-->
      
      <div class="tur-list-detay">
        <p>some details here</p>
      </div><!-- detail-->
      
      <div class="tur-bottom-detay">
        <a href="#">Link of box</a>
        <p>another thinks.. bla bla..</p>
      </div><!-- bottom detail-->
    
    </div>
  </div>
</div>



</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answers

- evilReiko
- June 15, 2017 at 11:26 am
- 0 votes
0
There are many ways to do this, but non will be easy.

One way to do it, with no need to use JavaScript/jQuery:
1. Use table layout. (HTML)
2. Set the image as the background of the left column. (CSS)
3. Set the background image size to 100% width 100% height, which will give you the stretch looking, or use the “background-size: cover;” effect. (CSS)
The concept as following:
```
<table style="width: 100%;">
    <tr>
        <td style="
            width: 40%;
            background-image: url(https://www.w3schools.com/css/trolltunga.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            ">
        </td>
        <td style="width: 60%;">
            text<br>
            text<br>
            text<br>
            text<br>
        </td>
    </tr>
</table>
```
Here’s a demo.
Login or Signup to reply.

$(document).ready(function () {
    var biggesthei = 0;

    $(".col-lg-5 img, .col-lg-7").each(function () {

        if ($(this).outerHeight() > biggesthei) {
            biggesthei = $(this).outerHeight()
        }

        if ($(window).width() < 100) {
            $(this).outerHeight() = biggesthei

        }

        $(".col-lg-5 img, .col-lg-7").css("min-height", biggesthei);
    });
     });

.box{
  width:700px;
  margin:30px auto;
}
.tur-list{
  border:1px solid #ccc;
  margin-bottom:15px;
}
img{
width:100%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="box">

<div class="box">

<div class="tur-list">
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
     <figure>
       <img src="http://content.anitur.com/web/images/240x220/2016-12/yurtdisi_tur_Sq4MvAMnDGjz7rAgEaOIbalkan-sehirleri-turu-4.jpg"/>
      </figure>
    </div>
    <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
      <div class="tur-list-title">
        <h3>This is the title</h3>
        <p>p of title</p>
      </div><!-- title -->
      
      <div class="tur-location">
        <p>Netherlands</p>
      </div><!-- location-->
      
      <div class="tur-list-detay">
        <p>some details here</p>
      </div><!-- detail-->
      
      <div class="tur-bottom-detay">
        <a href="#">Link of box</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis unde voluptatibus ea, possimus totam blanditiis molestiae doloremque ipsa magni maiores fugit? Impedit expedita aspernatur dignissimos ipsa consectetur accusamus praesentium, saepe, fugit incidunt doloribus. Maxime expedita nesciunt, magni accusamus culpa saepe cupiditate tempora cum soluta natus, ea illo quo! Nulla error repudiandae natus vel dicta sequi molestias, possimus optio a dolore laboriosam eligendi impedit nam dolorum! Temporibus necessitatibus alias ullam reiciendis ipsam id quisquam, repudiandae? Quas doloremque, laboriosam quaerat sed veniam, dolores ea aspernatur velit, accusamus eligendi soluta rerum architecto cum fuga? Explicabo assumenda quisquam laudantium quae laborum voluptatem alias harum!</p>
      </div><!-- bottom detail-->
    
    </div>
  </div>
</div>
  
  <div class="tur-list">
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
      <figure>
      <img src="http://content.anitur.com/web/images/240x220/2016-12/yurtdisi_tur_Sq4MvAMnDGjz7rAgEaOIbalkan-sehirleri-turu-4.jpg"/>
      </figure>
    </div>
    <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
      <div class="tur-list-title">
        <h3>This is the title</h3>
        <p>p of title</p>
      </div><!-- title -->
      
      <div class="tur-location">
        <p>Netherlands</p>
      </div><!-- location-->
      
      <div class="tur-list-detay">
        <p>some details here</p>
      </div><!-- detail-->
      
      <div class="tur-bottom-detay">
        <a href="#">Link of box</a>
        <p>another thinks.. bla bla..</p>
      </div><!-- bottom detail-->
    
    </div>
  </div>
</div>



</div>
</div>

Equal height using jquery

function equalHeight() {
    var biggesthei = 0;
    $(".tur-list .col-lg-5 img, .tur-list .col-lg-7").each(function () {

        if ($(this).height() > biggesthei) {
            biggesthei = $(this).height()
        }

        if ($(window).width() < 640) {
            $(this).height() = biggesthei

        }

        $(".tur-list .col-lg-5 img, .tur-list .col-lg-7").css("min-height", biggesthei);
    });
}
$(document).ready(function () {
        equalHeight();
    }):
    $(window).resize(function () {
        equalHeight();
    });

Please signup or login to give your own answer.

Click here to cancel reply.

Equal height with jquery? – Twitter bootstrap

Answers