CODEWITHSUNDEEP
jqueryhtmlresizeheight
antonanton
antonanton

Reputation: 591

Div height based on content

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…

$(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;
        }
      });
  });
});
#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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<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>

Upvotes: 2

Views: 8738

Answers (3)

Kabilan S
Kabilan S

Reputation: 1094

There are two options

1.)You can make all pages height you want to load inside the content div as the same size of the content div

2.)Else by Jquery

first clear the right side content div $('#content').remove();

second load your content ans set the height of the loaded document with the help of $('#content').height(...)

Refer: http://api.jquery.com/height/

Upvotes: 0

Mottie
Mottie

Reputation: 86453

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

Upvotes: 0

AlexC
AlexC

Reputation: 9661

try to change event to click , not "load"

Upvotes: 0

Related Questions