0

Basically I want to get the height of .r-side and have it applied to the height of .l-side so that these two elements are always the same height even if the window is resized, and positioned on top of each other. I'm not sure what's wrong with my jQuery.

Here's what I got:

$(window).load(function(){ $(".l-side").css({'height':($(".r-side").height()+'px')}); });

Using jQuery 3.1.1. And here's a jsFiddle of the issue I'm having.

I'm open to other methods than jQuery to accomplish this but in my research I only found solutions that were specific to columns, and these divs need to be positioned directly on top of each other.

little tiny man
  • 789
  • 4
  • 10
  • 26
  • In the fiddle, you use ID's in the HTML/CSS but classes in your jQuery – Gerard May 08 '17 at 09:29
  • 1
    Enable jquery in the fiddle. Also [.load (event)](http://api.jquery.com/load-event/) method is deprecated, (plus the load event is not reliable). Use [.ready](http://api.jquery.com/ready/) instead. – yezzz May 08 '17 at 09:37

2 Answers2

3

You have referenced .l-side and .r-side as classes in the jQuery, and coded them as ID's in the markup :)

In the snippet I altered your widths so it displays in the preview window, but you can see the heights now match.

$(window).load(function() {
  $("#r-side").css({
    'height': ($("#l-side").height() + 'px')
  });
});
#l-side img {
  width: 100px;
}

#r-side {
  width: 100px;
  height: 100px;
  background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="l-side"><img src="http://connor.la/sandbox/refsmaster/images/forever-2.jpg"></div>
<div id="r-side"></div>
mayersdesign
  • 5,062
  • 4
  • 35
  • 47
0

Please use id selector '#' as you have used id not classes and use document.ready instead of window.load.$(document).ready(function(){ $("#r-side").css({'height':($("#l-side").height()+'px')}); });

Ritwika Das
  • 189
  • 5