Question

I have searched and toyed with this code based on the many answers to similar problems found here and on other sites — I think it should work, but it’s not. I must be missing something.

I want to dynamically change the height of the sidebar div to be the same height of the left div, if the left div is greater than the original min-height. There is no background image in either div, but there is a border that is important to the design and that border ends at the min-height.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
  $(document).ready(function() {
    var leftHeight = $('#left-area').height();
    var sidebarHeight = $('#sidebar').height();

    if( leftHeight > 690 ) {
      $('#sidebar').css('min-height' , leftHeight+'px' );
      }
    else {
      }
    });
  </script>

Answer 1

You need to separate your javascript:

Also, you don’t need the ‘px’.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    var leftHeight = $('#left-area').height();
    var sidebarHeight = $('#sidebar').height();

    if( leftHeight > 690 ) {
      $('#sidebar').css('min-height' , leftHeight);
      }
    else {
      }
    });
</script>

If you ever run into javascript errors, you can always check the console.