Aligning page elements with window size

Question

The following is a series of functions to ensure that various elements on a page line up no matter what window size or when the window is resized. However I'm not sure my code is very concise as I am using the same function on three different event handlers. I read that function expressions aren't "hoisted" so I can't get the proper values on $(document).ready but I'm not sure how I could declare them with out making the code really messy and repetitive.

I've made a jsfiddle with the complete HTML and CSS.

 function captHeight(){
    var figCaption = $('.cap-bot').find($('figcaption'));
    var captionHeight = Math.max.apply(null, $('figcaption').map(function ()
      {
          return $(this).height();
    }).get());

    $('.cap-bot').css({
      'overflow': 'visible'
      });
      figCaption.css({
      'position': 'relative',
      'opacity': '1',
      'bottom': '0', 
      'min-height': captionHeight+ 20 + "px" //to account for padding
      });
}

function sameHeight(){
if($('.find-height').length > 0){
    var foundHeight= $('.find-height').height();
    var gaveHeight= $('.give-height').height();


    if (gaveHeight > foundHeight){
      captHeight();     
    }

    $('.give-height').css({
      'min-height': foundHeight
    });
  }
} 

$(document).ready(function(){
  sameHeight();
});

$(window).on('resize', function(){
  sameHeight();
});

$(window).on('scroll', function(){
  sameHeight();
});

Answer 1

I read that function expressions aren't "hoisted"

Yes. See var functionName = function() {} vs function functionName() {}.

so I can't get the proper values on $(document).ready

Why that? Unless the assignment to sameHeight did happen after the $(document).ready call, you can easily get the function.

but I'm not sure how I could declare them with out making the code really messy and repetitive.

You already have declared them, they are hoisted and everything is fine. However, even if you did use function expressions:

var captHeight = function() {
    …
};
var sameHeight = function() {
    …
};
$(document).ready…

then everything would have been fine. Notice that, as @Flambino mentioned already in the comments, you can shorten the part where you install the event listener to

$(document).ready(sameHeight);

$(window).on('resize', sameHeight)
         .on('scroll', sameHeight);