I am using jquery Isotope and have a series of tiles using the following layout:
<div class="element tileG g"><div class=titlePE>
<div class="nameP"></div>
<div class="subDefn"></div></div>
<div class="content"></div>
</div>
content is set at height:90px. I want to be able to test if it overflows and set a visual indicator so the user knows to expand the tile. The concept I am using is on clicking button class 'letter' I briefly set content height:auto and measure its new height. Here is my code (that doesn't work :(
$(".letter").click(function () {
$('.element').each(function(){
h1 = $(this).find('.content').outerHeight();
$('.content').css( { 'height': 'auto' });
h2 = $(this).find('.content').outerHeight();
$('.content').css( { 'height': 90 });
if ( h2 > h1 ) { $('.content').css( { 'background': 'white' }); }
});
});
All tiles end up white.
I am very open to either a new concept or some suggestions on where the above code is wrong.