Определение высоты div при изменении размера - PullRequest
Новая
       7

Определение высоты div при изменении размера

3 голосов
/ 16 сентября 2009

Я пытаюсь определить высоту div, в который загружаю контент. Этот div не имеет указанной высоты, так как я загружаю в него страницы, и они сами заполняют div в разных количествах. Я думаю, что код, который я использую, не работает.

#content div получает правильную высоту на document load, однако я не могу получить высоту при нажатии на событие load.

HTML: 

<div id="select">
<div id="menu">
    <ul>
    <li><a class="load" href="javascript:void(0)" id="p1">P1</a></li>
    <li><a class="load" href="javascript:void(0)" id="p2">P2</a></li>
    </ul>
</div>
<div id="spacer"></div>
<div id="content"></div>

CSS: 

#content {
    left: 227px;
    top: 20px;
    width: 703px;
    padding: 0 0 100px 0;
    position: absolute;
}

#spacer {
    border-right: 2px solid #000000;
    left: 10px;
    position: absolute;
    top: 710px;
    width: 215px;
}

мой jquery: 

$(document).ready(function() {
    //Load Initial Content
    $("#content").html('<ul><li>Loading Content...</li></ul>')
        .load("/content/" + "projects.php", null, function() {
            contentHeight = $("#content").height();
            selectHeight = $("#select").height();

            $("#content").height(contentHeight);
            $("#select").height(selectHeight);
            $("#spacer").height((contentHeight - selectHeight - 40) + "px")
                        .css({"top": selectHeight + 40 + "px" });
            });

    //Load content on click function
    $(".load").click(function(){
        loadName = $(this).attr("id");
        $("#content").html('<ul><li>Loading Content...</li></ul>')
                     .load("/content/" + loadName + ".php", null, function(){
                         contentHeight = $("#content").height();
                         selectHeight = $("#select").height();

                         $("#spacer").height(0);

                         if(selectHeight > contentHeight) {
                         $("#spacer").css({"display": "none"}); 
                         }else{

                         $("#spacer").css({"top": selectHeight + 40 + "px", "display": "block" })
                                     .height((contentHeight - selectHeight - 40) + "px");
                         return false;
                         }
                         });
    });
});

Я получаю это в firebug при загрузке: 

<div id="select" style="height: 689px;"/>
<div id="spacer" style="height: 5461px; top: 729px;"/>
<div id="content" style="height: 6190px;"/>

Теперь, если я нажму, скажем, P2, div с высотой содержимого останется прежним, даже если фактическое содержимое внутри div имеет высоту всего 625 пикселей; поэтому он не переключается.

Ответы [ 3 ]

2 голосов
/ 16 сентября 2009

Если JQuery не очень умный (и он умный, но я не думаю, что он умный), вы не получите событие resize, потому что firefox (и, вероятно, Safari) поддерживают только событие resize объекта окна. IE поддерживает событие resize для таких элементов, как DIV.

Следовательно, вам нужен другой подход: - 

$(document).ready(function()
{
  $("#content").html('<ul><li>Loading Content...</li></ul>')
              .load("/content/" + "projects.php", null, function()
              {
                window.setTimeout(content_loaded, 0);
              });

  function content_loaded()
  { 
    $("#content").css({"height": $("#content").height() + "px"}); 
  }

  $("#spacer").css({"height": $("#content").height() + "px"});

  $(".load").click(function()
  {
    loadName = $(this).attr("id");

    $("#content").html('<ul><li>Loading Content...</li></ul>')
                 .load("/content/" + loadName + ".php", null, function()
                 {
                   window.setTimeout(content_loaded, 0); });
                 });

    $("#spacer").css({"height": $("#content").height + "px"});
  });
});

Примечание. Я использую здесь метод setTimeout, поскольку IE часто отстает при сортировке параметров ширины и высоты при изменении содержимого. Используя setTimeout, он позволяет IE сортировать вещи до того, как будут доступны свойства высоты и ширины. Вы можете удалить его и передать content_loaded напрямую в качестве параметра обратного вызова в метод загрузки.

2 голосов
/ 16 сентября 2009 
//Get Content size after load
$("#content").bind("resize", function(){ 
                    $("#content").css({"height": $("#content").height()}); 
                    });

вы не добавляете «px» в конец значения высоты 

//Get Content size after load
$("#content").bind("resize", function(){ 
                    $("#content").css({"height": $("#content").height() + "px"}); 
                    });

ИЗМЕНИТЬ следует

работает локально, вам не хватает скобок в конце функции высоты в событии click: 

$("#spacer").css({"height": $("#content").height() + "px"}); //added parenthesis enables the #spacer div to change height accordingly

надеюсь, это поможет

0 голосов
/ 09 ноября 2009

Мне нравится использовать offsetheight для определения высоты, когда она не установлена.

...