Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery][AJAX][CSS] Pobranie wysokości elementu
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
vokiel
Tworzę sobie taką ramkę, taki niby tooltip, tyle, że z możliwością klikania na nim i wykonywania działań. Wygląda tak:



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:
  1. <?php
  2. <style type="text/css" media="all">
  3. <!-- CSS -->
  4. #dialog_rounded{
  5.    width:300px;
  6.    position:absolute;
  7.    height: auto;
  8. }
  9. #dialog_rounded #dialog_cien{
  10.    background:#5F5D5D;
  11.    margin:-8px 0 0 -8px;
  12.    padding:8px;
  13.    z-index:99;
  14.    opacity: 0.5;
  15.    height:auto;
  16.    width:300px;
  17.    display:block;
  18.    position:absolute;
  19. }
  20. #dialog_rounded #dialog_box{
  21.    position:relative;
  22.    display:block;
  23.    overflow-x:hidden;
  24.    overflow-y:hidden;
  25.    background:#FCFDFD;
  26.    border:1px solid #A6C9E2;
  27.    color:#222;
  28.    font-family:Lucida Grande,Lucida Sans,Arial,sans-serif;
  29.    font-size:1.1em;
  30.    padding:5px;
  31.    z-index:101;
  32. }
  33. #dialog_rounded #dialog_titlebar{
  34.    width: 285px;
  35.    background:#5C9CCC url(images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) repeat-x scroll 50% 50%;
  36.    border:1px solid #4297D7;
  37.    display:block;
  38.    clear:both;
  39.    position:relative;
  40.    height:30px;
  41. }
  42. #dialog_rounded #dialog_title{
  43.    padding:0.5em 0.3em 0.3em 1em;
  44.    color:#FFFFFF;
  45.    font-weight:bold;
  46.    font-family:Lucida Grande,Lucida Sans,Arial,sans-serif;
  47.    font-size:1.1em;
  48.    float: left;
  49.    display:block;
  50. }
  51. #dialog_rounded #dialog_content{
  52.    width: auto;
  53.    background:#fff;
  54.    border:0;
  55.    overflow:auto;
  56.    padding:0.5em 1em;
  57.    color:#222;
  58.    font-family:Lucida Grande,Lucida Sans,Arial,sans-serif;
  59.    font-size:1.1em;
  60. }
  61. #dialog_rounded #dialog_close{
  62.    background: transparent url(images/cross.png) no-repeat 50% 50%;
  63.    height: 30px;
  64.    width: 30px;
  65.    float: right;
  66.    display: block;
  67.    cursor:pointer;
  68. }
  69. </style>
  70. <!-- HTML -->
  71. <div id="dialog_rounded" style="visibility:hidden;width:300;"><!-- cien -->
  72.    <div id="dialog_cien"></div>
  73.    <div id="dialog_box"><!-- box -->
  74.        <div id="dialog_titlebar"><!-- titlebar -->
  75.            <span id="dialog_title">Szczegóły urlopu: <strong id="dialog_id"></strong></span>
  76.            <span id="dialog_close" title="Zamknij"> </span>
  77.        </div><!-- & of titlebar -->
  78.        <div id="dialog_content"><!-- content -->
  79.            Nulla posuere nulla sed lacus. Nunc hendrerit tempus dolor. Suspendisse et lectus iaculis libero rutrum cursus.        
  80.        </div><!-- & of content-->
  81.    </div><!-- & of box -->
  82. </div><!-- & of cien -->
  83.  
  84. <!-- js -->
  85. <script type="text/javascript">
  86. $('.showdialog').click(function(e){
  87.    e.preventDefault();
  88.    hideBox();
  89.    pageX = (e.pageX+15) + 'px';
  90.    pageY = (e.pageY+15) + 'px';
  91.    // ustawienie boxa 15px od kursora
  92.    $('#dialog_rounded').animate({top:pageY,left:pageX},1);
  93.    var id = $(this).attr('rel');
  94.    getData(id);
  95.    return false;
  96. });
  97. $('#dialog_close').click(function(){hideBox();});
  98.  
  99. function hideBox(){
  100.    $('#dialog_rounded').animate({height:0,width:0},'normal').hide('fast').animate({top:0,left:0},1);
  101. }
  102. function getData(id){
  103.    $.post(
  104.        'url',
  105.        {urlop_id: id},
  106.        function(data){
  107.            $('#dialog_id').text(id);
  108.            boxHeight = getHeight(boxHeight);
  109.            $('#dialog_rounded').animate({height:boxHeight+'px',width:'300px'},'normal').show('normal');
  110.        }
  111.    );
  112. }
  113. function getHeight(){
  114.    boxHeight = $('#dialog_box').height()+12;
  115.    // zaokraglenie naroznikow
  116.    $('#dialog_rounded').css({width:'0px'});
  117.    $('#dialog_cien').css({height: boxHeight+'px'}).animate({opacity:0.5});
  118.    $('#dialog_rounded').css({ visibility: "visible", display: "none"}).children('#dialog_cien').corner("rounded 10px");
  119.    return boxHeight;
  120. }
  121. </script>
  122. ?>


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?
smentek
Pewno że znamy. Wysokość to atrybut elementu a do atrybutów elementów można się łatwo dostać jeśli się chce wystarczy na forum zapytać. A tak powaznie, pogoogluj sobie. Ale powinienes pamietac że takie dynamiczne podmiany CSS przy pomocy javacriptu tworzą kod niemożliwy w późniejszym utrzymianiu...
vokiel
Dzięki za odp smile.gif, która co prawda wiele nie wnosi, i nie daje odp tongue.gif
Na szczęście nie jest to już ważne, minęło 5 m-cy, po takim okresie wątki można uznać za nieaktualne;)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.