I am trying to detect the height of a div that I am loading content into. This div does not have a specified height, as I am loading pages into it and they themselves fill up the div in different amounts. I think the code I am using is not working.

The #content div is getting the correct height on document load, however I cannot get the height when the load event is clicked.

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;
}

my 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;
                         }
                         });
    });
});

I am getting this in firebug on load:

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

Now if I click on say P2, the div with content height stays the same, even though the actual content inside the div is only 625px tall; so it is not getting switched.

I am trying to detect the height of a div that I am loading content into. This div does not have a specified height, as I am loading pages into it and they themselves fill up the div in different amounts. I think the code I am using is not working.

The #content div is getting the correct height on document load, however I cannot get the height when the load event is clicked.

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;
}

my 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;
                         }
                         });
    });
});

I am getting this in firebug on load:

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

Now if I click on say P2, the div with content height stays the same, even though the actual content inside the div is only 625px tall; so it is not getting switched.

• javascript
• jquery
• html
• css
• resize

• What Browsers have you tested this on? – AnthonyWJones Commented Sep 16, 2009 at 10:49

3 Answers 3

Unless JQuery is being super clever (and it is clever but I don't think its this clever) you aren't getting a resize event because firefox (and probably Safari) only support the resize event on the window object. IE does support the resize event on elements such as a DIV.

Hence you need a different approach:-

$(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"});
  });
});

Note I use the setTimeout method here because IE often lags when sorting out width and height parameters when content has changed. By using setTimeout it lets IE sort things out before the height and width properties are accessed. You could choose to remove it and pass content_loaded directly as the callback parameter to the load method.

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

you're not adding the "px" to the end of the height value

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

EDIT follows

got it working locally, you were missing parenthesis at the end of the height function in the click event:

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

hope this helps

I like to use offsetheight to detect height when one is not set.