title: jQuery: height() of a div and window resize
body: <p>take a look and the following fiddle first and try out the overlay header. When you close the div and resize the window, the #overlay div starts to jump around an becomes visible even though it is closed. This is caused by the text in the #overlay div, since the div has no fixed height and is responsive. How can I alter my jQuery and stop this effect?</p>
  
  <pre><code>var overlayState = 'close';
  var overlay = $('#overlay');
  
  $(window).resize(function () {
  
      if (overlayState == 'close') {
          overlay.css({
              display: 'block',
              marginTop: -overlay.height()
          });
      } else {
          overlay.css({
              display: 'block',
              marginTop: 0
          });
  
      }
  });
  
  $(document).ready(function () {
      // var overlay = $('#overlay');
      var overlayControl = $('.overlay-controls a');
      var overlayicon = $('.overlay-controls span');
  
      overlay.css({
          display: 'block',
          marginTop: -overlay.height()
      });
  
      // var overlayState = 'close';
  
      overlayControl.toggle(function () {
          overlayState = 'open';
          overlayicon.addClass('open');
          overlay.animate({
              marginTop: 0
          }, 600, 'easeInOutQuart');
  
      }, function () {
          overlayState = 'close';
          overlayicon.removeClass('open');
          overlay.animate({
              marginTop: -overlay.height()
          }, 900, 'easeOutBounce');
  
      });
  });
  </code></pre>
  
  <p>And here's the FIDDLE: <a href="http://jsfiddle.net/RS9yb/4/" rel="nofollow">http://jsfiddle.net/RS9yb/4/</a></p>