0

some images (such as 4 picture with each different height) inside a TabContent, I wrote

$('#Tab').tabs({.......}); 
// Tab function is not the point, its fine.

$('#TabContent').ajaxComplete(function() {
    $('.bookCover').removeAttr('height');
    $('.bookCover').each(function() {
        var h;
        h = this.height;
        $(this).height(h);
        alert($(this).height());
    });
});

and the result is 130, 0, 0, 0. (only the first one can get the real height)

how to get the height in Chrome. When I am using Tabsload.

I have tried to use

$('.bookCover').load(function() {
    // ........
    $(this).height(h);
    alert($(this).height());
});

but still can get once TabContent data loaded.

click the tab again, then TabContent is not correct with height.

1 Answer 1

0

The problem is due to the fact that elements which are hidden by display: none have no height attribute.

I've created a demonstration fiddle here

The best alternative I can think of is to clone the image to a position off screen (say left: -3000px) and set display: block on it, and then get its height.

1
  • Actually, this is because Chrome too fast to renders the image, and JS detected zero pixel width and height of the image.
    – Cyril
    Apr 11, 2012 at 8:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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