jquery - Setting up the height of two elements dynamically with jquery

Question

I have a section like - <section id="left_side"> //Some crap here.</section> and an aside element like this - <aside id="right_side"> //Some crap here.</aside>

What I want to do is when the height of the aside container is greater than the section container, then using jQuery I want it's height to expand and be greater or equal to the aside container.

But, at the same time if the aside is smaller than the section container then I want it's height to expand and be equal to the section container.

I have absolutely no idea how to do this using jQuery.

Answer 1

$('.section-container').on('adjustNeighbors', '#leftside,#rightside', function () {
  var thisHeight = $(this).outerHeight();
  var sectionToResize = $(this).is('#leftside') ? '#rightside' : '#leftside';

  $(sectionToResize).css('height', thisHeight + 'px');
});

并像这样触发它..

function someFunction(){    
    // some code that resized #leftside or #rightside
    thatSection.trigger('adjustNeighbors');
}

Answer 2

function resize_section_aside() {
     var section = $('leftside'),
         aside = $('rightside'),
         section_height = section.height(),
         aside_height = aside.height();
     if( aside_height > section_height ) {
        section.height( aside_height );  // re-size section to aside
     } else {
        aside.height( section_height );   // re-size aside to section
     }
    });
}

$(function() {
   resize_section_aside();
});

DOM上面的代码将在加载完成时触发。如果您需要任何事件来触发它，那么只需resize_section_aside()在该事件处理程序中调用该函数。