
Mam z nim mały problem. Chcę aby pozostała ta półprzezroczysta ramka w okół diva. Jako, że opacity jest dziedziczone, czyli element w środku, nie może zawierać się w tym półprzezroczystym. Zatem w tym momencie pojawia się problem ustalenia wysokości tego tła.
Trochę kodu:
<?php <style type="text/css" media="all"> <!-- CSS --> #dialog_rounded{ width:300px; position:absolute; height: auto; } #dialog_rounded #dialog_cien{ background:#5F5D5D; margin:-8px 0 0 -8px; padding:8px; z-index:99; opacity: 0.5; height:auto; width:300px; display:block; position:absolute; } #dialog_rounded #dialog_box{ position:relative; display:block; overflow-x:hidden; overflow-y:hidden; background:#FCFDFD; border:1px solid #A6C9E2; color:#222; font-family:Lucida Grande,Lucida Sans,Arial,sans-serif; font-size:1.1em; padding:5px; z-index:101; } #dialog_rounded #dialog_titlebar{ width: 285px; background:#5C9CCC url(images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) repeat-x scroll 50% 50%; border:1px solid #4297D7; display:block; clear:both; position:relative; height:30px; } #dialog_rounded #dialog_title{ padding:0.5em 0.3em 0.3em 1em; color:#FFFFFF; font-weight:bold; font-family:Lucida Grande,Lucida Sans,Arial,sans-serif; font-size:1.1em; float: left; display:block; } #dialog_rounded #dialog_content{ width: auto; background:#fff; border:0; overflow:auto; padding:0.5em 1em; color:#222; font-family:Lucida Grande,Lucida Sans,Arial,sans-serif; font-size:1.1em; } #dialog_rounded #dialog_close{ background: transparent url(images/cross.png) no-repeat 50% 50%; height: 30px; width: 30px; float: right; display: block; cursor:pointer; } </style> <!-- HTML --> <div id="dialog_rounded" style="visibility:hidden;width:300;"><!-- cien --> <div id="dialog_cien"></div> <div id="dialog_box"><!-- box --> <div id="dialog_titlebar"><!-- titlebar --> <span id="dialog_title">Szczegóły urlopu: <strong id="dialog_id"></strong></span> <span id="dialog_close" title="Zamknij"> </span> </div><!-- & of titlebar --> <div id="dialog_content"><!-- content --> Nulla posuere nulla sed lacus. Nunc hendrerit tempus dolor. Suspendisse et lectus iaculis libero rutrum cursus. </div><!-- & of content--> </div><!-- & of box --> </div><!-- & of cien --> <!-- js --> <script type="text/javascript"> $('.showdialog').click(function(e){ e.preventDefault(); hideBox(); pageX = (e.pageX+15) + 'px'; pageY = (e.pageY+15) + 'px'; // ustawienie boxa 15px od kursora $('#dialog_rounded').animate({top:pageY,left:pageX},1); var id = $(this).attr('rel'); getData(id); return false; }); $('#dialog_close').click(function(){hideBox();}); function hideBox(){ $('#dialog_rounded').animate({height:0,width:0},'normal').hide('fast').animate({top:0,left:0},1); } function getData(id){ $.post( 'url', {urlop_id: id}, function(data){ $('#dialog_id').text(id); boxHeight = getHeight(boxHeight); $('#dialog_rounded').animate({height:boxHeight+'px',width:'300px'},'normal').show('normal'); } ); } function getHeight(){ boxHeight = $('#dialog_box').height()+12; // zaokraglenie naroznikow $('#dialog_rounded').css({width:'0px'}); $('#dialog_cien').css({height: boxHeight+'px'}).animate({opacity:0.5}); $('#dialog_rounded').css({ visibility: "visible", display: "none"}).children('#dialog_cien').corner("rounded 10px"); return boxHeight; } </script> ?>
Teraz pojawia się problem, bo co któryś raz boxHeight jest równy zero. Nie pobiera wysokości elementu, i wtedy się sypie, bo ten cień jest tylko paskiem na wysokość 12px + paddingi.
Czy znacie sposób żeby zmierzyć wysokość elementu po załadowaniu treści do niego?