Question

I’m trying to get the height of an element with jQuery, but for some reason it always returns 0.

I load content using ajax in a container. This content is hidden by default (display: none). Before showing the content I need to retrieve the height of an element in the new content.

Which should work.

My simplified code:

success: function(data) // this is the success callback of jquery's ajax call
{
  var content = $('#content');
  content.fadeOut('slow', function() {
    content.html(data.html);
    set_comments_height();
    content.fadeIn('slow');
  });
}

function set_comments_height()
{
  var content = $('#content');
  var info = $('.trackinfo .artwork-and-info', content);

  console.log(parseInt(info.outerHeight(true), 10));
}

You can see the issue on my website after clicking a track at the left side.

I might be missing something here, but I don’t see why it doesn’t return the correct height.

Answer 1

outerHeight() will return 0 for elements with display property set to none. To counter this, in your AJAX’s success handler, before setting the html, set the element’s opacity to 0 and display to block (it still wont show up as opacity is 0). Once the html is set, call you set_comments_height() function followed by a css animation to bring it back to opacity: 1

i.e.

success: function(data) // this is the success callback of jquery's ajax call
{
  var content = $('#content');
  content.fadeOut('slow', function() {

    // opacity -> 0 and display -> block
    content.css({'opacity': 0, 'display': 'block'});

    content.html(data.html);
    set_comments_height();

    // instead of fadeIn, use CSS animation to bring it to opacity 1
    content.animate({'opacity': 1}, 'slow');

  });
}