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
Post a Comment