CODEWITHSUNDEEP
jquerycss
Akash Kumar
Akash Kumar

Reputation: 13

Setting up the height of two elements dynamically with jquery

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.

Upvotes: 0

Views: 94

Answers (2)

Robin Maben
Robin Maben

Reputation: 23034

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

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

And trigger it like this..

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

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87073

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();
});

Above code will fire at DOM load finish. If you need any event to fire it then just call the resize_section_aside() function within that event handler.

Upvotes: 0

Related Questions