jQuery code to set 2 elements to same height – closingtags </>
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

Dylan Hildenbrand smiling at the camera. I have tossled, brown hair, rounded glasses, a well-trimmed and short beard. I have light complexion and am wearing a dark sweater with a white t-shirt underneath.

Author and full stack web developer experienced with #PHP, #SvelteKit, #JS, #NodeJS, #Linux, #WordPress, and #Ansible. Check out my book at sveltekitbook.dev!

Do you like these posts? Consider sponsoring me on GitHub!

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.