Question

Hey all i am having some problems with loading an HTML page using jQuery’s load() function within my div. If i have content inside my HTML page thats larger (larger height) than the DIV its going into originally then it just bleeds over the dive.

This is what my page looks like after i use the jQuery load() on a DIV:

It should look like this when loaded:

This is what my HTML DIV code looks like:

 <div class="container_1" id="mainHTML">  
  <div class="pageinner" id="innerHTML">
    <p style="font-size: 24px;" class="MMHeader">The CMS System<p>
    <p style="color: #F90;" class="mmBelowHeader">Please provide your email and password below in order to log into the CMS system.<p>
        <section class="main" id="mainContent">
            <div class="form-4">
                <p>
                    <input type="text" name="username" id="username" placeholder="Email Address">
                </p>
                <p>
                    <input type="password" name='password' id="password" placeholder="Password"> 
                </p>

                <p>
                    <button class="orange" name="forgotLoginButton" id="forgotLoginButton" onclick="shrinkBox();" style="margin-right: 5px;">Forgot Password</button>
                    <button class="blue" name="LoginButton" id="LoginButton" onclick="mainMenu();" >Log in</button>
            </div>​
        </section>
  </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $("#mainHTML").animate({width:500, height: 300, overflow: 'auto'});
    $("#innerHTML").animate({width:470, overflow: 'auto'});
    $(".form-4").animate({margin: '10px auto 10px', overflow: 'auto'});
    $('#mainContent').load('test.html');
});
</script>

I’m sure its because i am animating the width/height of the box but surly there is a way to keep the loaded content within the DIV and size the height of it according to whats loaded??

UPDATE

$('#mainContent').fadeOut(0).load('test.html', function() {
    $('#mainHTML').animate({width:940, height: 'auto'});
    $("#innerHTML").animate({width:940, overflow: 'auto'});
}).fadeIn(2000);

But it does not resize the div to the loaded html content height-wise?

Answer 1

Try to reset the height of the #mainHTML after retrieving data:

$('#mainContent').load('test.html', function() {
  $("#mainHTML").stop().css({height: 'auto'});
})

http://jsfiddle.net/KzEpL/
http://jsfiddle.net/KzEpL/1/