jQuery .height() not functioning correctly

Question

I am trying to center a Modal Window on the screen (Which works completely fine), apart from when I'm adding content to it via jQuery and THEN getting it's width & height to center, it will always output the height as 0 instead of it's intended height. Here's my code:

        // Now to use the Data and add it to the Modal Window...
        $('#portfolioModal .inner .data').html('<h1>' + parsedData['name'] + '</h1>\n' + parsedData['desc'] + '');

        var modalWidth = $('#portfolioModal').width(); // Get the Modal Window's Width
        var modalHeight = $('#portfolioModal').height(); // Get the Modal Window's Height

        alert(modalHeight);

        var left = (windowWidth / 2) - (modalWidth / 2); // Calculate the left margin for center alignment
        var top = (windowHeight / 2) - (modalHeight / 2); // And calculate the top margin for center alignment

        $('#portfolioModal').css({ // Append the Left and Top margin to the Modal Window
            'left': left,
            'top': top
        });

Modal HTML:

        <div id="portfolioMask">
                    <div id="portfolioModal">
                                <div class="inner">
                                            <div id="portfolioModalClose">Close</div>
                                            <span class="data"></span>
                                </div>
                    </div>
        </div>

Any help is appreciated!

Answer 1

If the div is hidden ( display:none ) when you fire the jQuery height() - it will always return a height of 0. I believe this is due to it not actually taking up space on your page - meaning its not really a part of it without being displayed. If you want to keep the div hidden, but want to get the height I recommend using the following CSS:

position:absolute;
visibility: hidden;

Using visibility hidden will make the element take up space in the dom but keep it from being visible - so it will have a height. Using position of absolute will pop it out of your actual page, so its not forcing content on your page to get pushed around by its height / width.

I personally also like to add a

left: -30000px;

I've found that some older IE's don't play well with this work around and floating the divs off the page ensures they're not visible.

Answer 2

Try $('#portfolioModal').css('height');

Update:

// Now to use the Data and add it to the Modal Window...
$('#portfolioModal .inner .data').append('<h1>' + parsedData['name'] + '</h1>\n' + parsedData['desc'] + '', function(){
  var modalWidth = $('#portfolioModal').width(); // Get the Modal Window's Width
  var modalHeight = $('#portfolioModal').height(); // Get the Modal Window's Height

  alert(modalHeight);

  var left = (windowWidth / 2) - (modalWidth / 2); // Calculate the left margin for center alignment
  var top = (windowHeight / 2) - (modalHeight / 2); // And calculate the top margin for center alignment

  $('#portfolioModal').css({ // Append the Left and Top margin to the Modal Window
      'left': left,
      'top': top
  });

});

Answer 3

IS the dialog in a div? If it's a span, it will always return 0.

Answer 4

You have to specify pixel in left and top variable.

var left = (1024 / 2) - (modalWidth / 2) + "px"; 
var top = (768 / 2) - (modalHeight / 2) + "px"; 

$('#portfolioModal').css({ 
   'margin-left': left,
   'margin-top': top
 });