0

I have two column layout, left side only one image column and right side content etc. right now both are same height if rotate screen then it is not equal height but i refresh page(rotate screen) then both column do have equal height. i am trying to equal height without refresh page at rotate screen.

$(function(){
    $balancer = function() {
        $('.main-box').each(function(){
            if($('.cola',this).height()>$('.colb',this).height()){
                $('.colb',this).height($('.cola',this).height())
            } else {
                $('.cola',this).height($('.colb',this).height())
            }

        });
    }
    $balancer();
    $(window).load($balancer());
    $(window).resize($balancer());
});

html

<div class="main-box">
<div class="cola"></div>
<div class="colb"></div>
</div>
UDigi
  • 23
  • 2
  • 2
  • 10

3 Answers3

0

You can hook into the DeviceOrientation change event.

window.addEventListener("deviceorientation", function (e) {  
      //DO stuff here.
}, false);

Which should trigger when you go from horizontal to vertical and back again.

Ben Temple-Heald
  • 708
  • 1
  • 6
  • 16
0

your jquery selector seems wrong. 

$('.main-box').each....

You need to select the inner divs not the wrapper.

$('.main-box > div').each....



if( $(this).height() > $(this).siblings().height() ) {
      $(this).siblings().height( $(this).height() );
 } else {
      $(this).height( $(this).siblings().height() )
  }
Faraz Sh.
  • 377
  • 2
  • 8
0

Possible duplicate of : How can I make Bootstrap columns all the same height?

And there is another link which can help you: http://getbootstrap.com.vn/examples/equal-height-columns/

Community
  • 1
  • 1
er-han
  • 1,859
  • 12
  • 20