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();

      'overflow': 'visible'
      '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){

      'min-height': foundHeight


$(window).on('resize', function(){

$(window).on('scroll', function(){
  • \$\begingroup\$ Hoisting doesn't matter here. You should be able to just do $(sameHeight); $(window).on("resize scroll", sameHeight); and done \$\endgroup\$ – Flambino Jun 10 '14 at 16:59
  • \$\begingroup\$ I thought hoisting might be why it doesn't seem to work on document.ready only when it scrolls as it is getting the height before the captHeight() is applied. Otherwise cheers for the tidier function calls. I didn't know you could use them together like that. If you want to submit it as an answer it seems good to me. \$\endgroup\$ – mantis Jun 10 '14 at 17:37
  • \$\begingroup\$ Your jsfiddle seems to work fine on document.ready with either your code or the one I suggested. In any case, hoisting is only relevant within the execution of the script itself (i.e. in what order are things written), but has nothing to do with timing of said execution, which is what could be problematic (e.g. trying to manipulate elements before they've been loaded or laid out) \$\endgroup\$ – Flambino Jun 10 '14 at 18:52
  • \$\begingroup\$ If you take out the on.('scroll') it doesn't work on document.ready that said it is almost impossible for it not to work as one would have to scroll to see that part but I can't work out why it wouldn't. So I'm guessing the problem is about timing as you said. \$\endgroup\$ – mantis Jun 10 '14 at 19:30
  • \$\begingroup\$ Timing isn't an issue here (it could be, if the code was different, but not the way it is). And taking out the on('scroll') doesn't break anything for me. The fiddle works fine with only the ready event (as indeed it should) \$\endgroup\$ – Flambino Jun 10 '14 at 20:36

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() {

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


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.