Find dimensions of object that has display: none
<p>On the right side of my page I have a list of sponsors.</p>

<p>My active page area (left side) height varies from page to page, depending on the story it contains every time.</p>

<p>I want the list's height to match the live pages height, so I thought I'd always show the main sponsors, and for the rest of them, I'd hide them, and show exactly as many as I can each time.</p>

<p>My markup looks like this:</p>

<pre><code>&lt;div id="xorigoi"&gt;
&lt;a class="basic"&gt;&lt;img src="/views/images/adjustable/sideXorigoi/1.png"&gt;&lt;/a&gt;
&lt;a class="basic"&gt;&lt;img src="/views/images/adjustable/sideXorigoi/2.png"&gt;&lt;/a&gt;
&lt;a class="basic"&gt;&lt;img src="/views/images/adjustable/sideXorigoi/3.png"&gt;&lt;/a&gt;
&lt;a class="rest"&gt;&lt;img src="/views/images/adjustable/sideXorigoi/4.png"&gt;&lt;/a&gt;
&lt;a class="rest"&gt;&lt;img src="/views/images/adjustable/sideXorigoi/5.png"&gt;&lt;/a&gt;
&lt;a class="rest"&gt;&lt;img src="/views/images/adjustable/sideXorigoi/6.png"&gt;&lt;/a&gt;
&lt;a class="rest"&gt;&lt;img src="/views/images/adjustable/sideXorigoi/7.png"&gt;&lt;/a&gt;
&lt;a class="rest"&gt;&lt;img src="/views/images/adjustable/sideXorigoi/8.png"&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>Every image is a link to each sponsor's site. Every image has it's own height.</p>

<p>Elements that have the class <code>.rest</code> are hidden using <code>display: none</code></p>

<p>I'm trying to calculate if adding the new image will make the list longer than the page, but since the elements are hidden, offsetHeight = 0.</p>

<p>What can I do? </p>

<p>My javascript/jquery code so far looks like this:</p>

<pre><code>$(
function(){
var containerHeight = $('#mainPageContainer')[0].offsetHeight; // total height of page
var xorigoi = $('#mainRightSide .rest'); // select the sponsors
var newHeight = 1062; // this is the right side height I am already using
$.each( xorigoi , function( index ){
if( newHeight + heightOfNewElement &gt; containerHeight ){
return false; // break each
}
xorigoi.eq(index).css('display','block'); // display the sponsor
newHeight = newHeight + heightOfNewElement;
})
}
)
</code></pre>

<p>So bottomline, how can I get heightOfNewElement in the function above?</p>
