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();
});
$(sameHeight); $(window).on("resize scroll", sameHeight);
and done \$\endgroup\$ – Flambino Jun 10 '14 at 16:59document.ready
only when it scrolls as it is getting the height before thecaptHeight()
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:37on.('scroll')
it doesn't work ondocument.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:30on('scroll')
doesn't break anything for me. The fiddle works fine with only theready
event (as indeed it should) \$\endgroup\$ – Flambino Jun 10 '14 at 20:36