title: jQuery: Header height returns 0 on subsequent pages
body: <p>I don't really understand the problem I am having now. I have this code: </p>
  
  <pre><code>$(document).on("pageshow", "[data-role=page]", function(){
     var $height = $("[data-role=header]").height();
     alert($height);
  });
  </code></pre>
  
  <p>This code is working fine on the first page (index) and actually returns an alert with 50. However when I navigate to different pages, the alert returns a height of 0 unless I do a full refresh.</p>
  
  <p>I tried window onload function too, it returns me 0. What I want to do is to get the height of the header for every page and use it to align ui-content properly. </p>
  
  <p>Can anyone explain to me what's going on and what is the right way to do this? There's not much in the header except for a font and a button. </p>