Why is height returning 0

1 Views

I have a rotating slideshow on the homepage, and want to set the height of the content based on the height of the image minus the height of the title minus the height of the arrows. For some reason neither the height of the title or image are being returned as anything but 0.

see here: http://www.keganquimby.com/lumina/

Read More

the excerpt (content under the title next to the image) cuts into the arrows when the image isn’t tall enough, so I’d like to set it with CSS based on the image height.

my js: 

jQuery(document).ready(function($){
$('.slides .slide').each(function(){

    var slideHeight = $(this).height();
    var headerHeight = $('.slide-content header').height();
    var arrowHeight = $('.flex-direction-nav').height();

    var contentHeight = slideHeight - headerHeight - arrowHeight;

    });
});

NEW JS (edited to set the height, and pull the other height calls outside the each loop): 

jQuery(window).load(function($){

var slideHeight = $(this).height();
var headerHeight = $('.slide-content header').height();
var arrowHeight = $('.flex-direction-nav').height();

$('.slides .slide').each(function(){

    var contentHeight = slideHeight - headerHeight - arrowHeight;
    $('footer.post-more').css('height', contentHeight + 'px');

    });
});
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. You have to wait for the images to load before measuring their height. Note that the DOM readiness doesn’t mean that the images have been loaded. Try this instead:

    jQuery(window).load(function($){
    var headerHeight = $('.slide-content header').height(),
        arrowHeight = $('.flex-direction-nav').height();

    var imgHeights = $('.slides .slide').map(function() {
        return $(this).height() - headerHeight - arrowHeight;
    });
});

    From jQuery.load:

    The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.