Issue getting the height of an element

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.

Wow. Looks like I got older hehehe. Yes, it works now. Try using a single selector like: **$('#content > .trackinfo > .artwork-and-info').outerHeight(true);** I tried with your site in console and it evaluates to 109. — Alfabravo, Dec 26 '11 at 22:55
@Alfabravo nopez doesn't work. Even when I just run the contents of the `set_comments_height()` function in the console it DOES work. — PeeHaa, Dec 26 '11 at 23:03
Well, check for some other error... in my case, sound.play raises an error (not a function). Maybe the script execution stops because of some other error. — Alfabravo, Dec 26 '11 at 23:04
@Alfabravo also when I output the `.html()`, just before I try to get the height, of the container is DOES contain the stuff. — PeeHaa, Dec 26 '11 at 23:05
@Alfabravo I don't get an error, prop you're just clicking too fast (player not yet loaded :) it's on my list :P). — PeeHaa, Dec 26 '11 at 23:06

score 1 · Accepted Answer · answered Dec 27 '11 at 01:10

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

  });
}

answered Dec 27 '11 at 01:10

techfoobar

65,616
14
114
135

But how come it works on jsfiddle? P.S. You are correct though. it does seem to return the correct height now. – PeeHaa Dec 27 '11 at 01:13
Well, thats interesting. I've come across this very issue more than once and each time i had to resort to some hack (for ex like the one i pointed out), i wonder if jQuery's later versions have that fixed. Let me look this up further. I'll get back to you. – techfoobar Dec 27 '11 at 01:33
@PeeHaa Both jsFiddle and your site have jQ 1.7.1. That's odd – Alfabravo Dec 27 '11 at 14:34
@Alfabravo - Not just the jQuery version. The doc types are exactly the same too. Still the difference! I have not been able to figure out why till now.. – techfoobar Dec 27 '11 at 14:41
Looks like jsFiddle is to blame hehe. http://stackoverflow.com/questions/7131995/jquery-outerheight-doesnt-work-when-element-is-hidden and http://stackoverflow.com/questions/2345784/jquery-get-height-of-hidden-element-in-jquery-1-4-2 ... – Alfabravo Dec 27 '11 at 14:52

Issue getting the height of an element

1 Answers1