javascript - jQuery .height() return 0 when visible but non-0 when hidden -


i have problem here right opposite others: in jquery cannot height of element when it's visible, when hidden. have html code:

<div id="filtering-filter-holder">     <div id="filtering-filter-holder-inner"></div> </div> 

basic css it:

#filtering-filter-holder {     display: none;     position: absolute;     width: 420px;     min-height: 100px;     padding: 5px 5px 5px 5px;     background-color: #ffffff;     border: 1px solid #164372; } 

and finally, js in document.ready():

$('div.filtering-filter-headline').mouseenter(function() {     var el = $(this).parent().find('div.filtering-filter-content');      if ($('div#filtering-filter-holder').is(':visible')) {         $('div#filtering-filter-holder-inner').stop(true, true).fadeout(300, function() {             $('div#filtering-filter-holder-inner').html($(el).html());             var height = $('div#filtering-filter-holder-inner').height();             $('div#filtering-filter-holder').stop(true, true).animate({ height:height }, 300);         }).fadein(300);         $('div#filtering-filter-holder').stop(true, true).animate({ left: $(this).offset().left }, 300);     }     else {         $('div#filtering-filter-holder-inner').html($(el).html());         $('div#filtering-filter-holder').css({ top: ($(this).offset().top + 22), left: $(this).offset().left });         $('div#filtering-filter-holder').fadein(300);         $('div#filtering-filter-holder-inner').fadeout(1, function() {             var height = $('div#filtering-filter-holder-inner').height(); // not working without hidding element             $('div#filtering-filter-holder').height(height);         }).fadein(1);     } }); 

if filtering-filter-holder visible, animations added. if not, initial setup required - however, i'm not able height of filtering-filter-holder-inner if element display: block, , have hide before. i'm wondering, have done in bad way - google says, developers have problem opposite problem.

i know why have hide element first.

i'm able use both, jquery , jqueryui, both loaded on page:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 

the example on: http://jsfiddle.net/tomis/jdwbk/


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

CSS3 Transition to highlight new elements created in JQuery -