Div height based on content

Question

I am having a page load within a content div when the document is ready. However, I also have some links that load different pages into that same content div whenever the user clicks on them. I am trying to establish the height of the content div to control something else, however once the height of the div is set on page load, I cannot seem to get the new size of the content div with the new page in it…

For example, the loaded page is 6000px, page 1 is 500px in height and page 2 is 300px in height. When the page loads, the content div is set to 6000px. Yet when I click page 1 to load it into the content div, the content div remains set to 6000px even though the content itself is only 500px in height, same for page 2, etc…

Here is the html:

<div id="select">
    <div id="menu">
        <ul>
        <li><a class="load" href="javascript:void(0)" id="page1">page1</a></li>
        <li><a class="load" href="javascript:void(0)" id="page2">page2</a></li>
        </ul>
    </div>
</div>
<div id="spacer"></div>
<div id="content"></div>

Here is the CSS:

#select { 
    width: 215px;
    top: 20px;
    left: 10px;
    position: absolute;
    }

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

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

Here is my jquery:

$(document).ready(function() {
    //Load content on page load
    $("#content").html('<ul><li>Loading Content...</li></ul>')
                 .load("/content/" + "projects.php", null, function() {
                            contentHeight = $("#content").height();
                            selectHeight = $("#select").height();
                            $("#spacer").height(contentHeight + "px")
                                        .css({"top": selectHeight + 40 + "px" });
                 });
    //Load content on click
    $(".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();

                                    if(selectHeight < contentHeight) {
                                    $("#spacer").css({"top": selectHeight + 40 + "px", "display": "block" })
                                                .height(contentHeight + "px");
                                    }else{        
                                    $("#spacer").css({"display": "none"}); 
                                    return;
                                    }
                    });
    });
});

Answer 1

try to change event to click , not "load"

Answer 2

Did you try setting the height to "auto"?

---

Edit: I looked at what you were doing and it was a bit confusing at first (a little CSS would have helped a lot). I was wondering if maybe not assigning the variable using "var" was causing problems, but for some reason this script always worked for me.

So, I cleaned up the code a little - I wasn't sure why you were adding the selectHeight everytime since that value shouldn't change - you can just deal with that in the CSS because absolute positioning isn't required.

So, try this (no change to the HTML, so I didn't add it):

CSS

#spacer {
 background: #555;
 float: left;
 width: 200px;
 margin-right: 20px;
 padding: 20px;
}
#content {
 background: #444;
 float: left;
 width: 1000px;
 padding: 20px;
}

Script

$(document).ready(function(){
 //Load content on page load
 $("#content").html('<ul><li>Loading Content...</li></ul>')
  .load("/content/" + "projects.php", null, function() {
   $("#spacer").height( $("#content").height() + "px");
  });

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