Categories
CSS jQuery

jQuery code to set 2 elements to same height

This is a little chunk of jQuery written to set a couple elements to equal heights. It has to take into consideration, the padding on the two elements. The two elements being set to equal heights are entry-content and sidebar_images.

$(window).load(function() {

  var finalleft = $('.entry-content').height();
  var finalright = $('.entry-content').height();
  var padleft = parseInt($('.entry-content').css('paddingTop')) + parseInt($('.entry-content').css('paddingBottom'));
  var padright = parseInt($('.sidebar_images').css('paddingTop')) + parseInt($('.sidebar_images').css('paddingBottom'));

  if($('.sidebar_images').height() < $('.entry-content').height()){
    var padtot = padleft - padright;
    $('.sidebar_images').height(finalleft+ padtot);
  }
  else {
    var padtot = padright - padleft;
    $('.entry-content').height(finalright + padtot);
  }

});

By Dylan Hildenbrand

Full stack web developer experienced with #PHP, #SvelteKit, #JS, #NodeJS, #Linux, and #Ansible. I love a good challenge.

profile for Dylan Hildenbrand on Stack Exchange, a network of free, community-driven Q&A sites  

Do you like these posts? Consider sponsoring me or making a donation!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.