1

I am attempting to resize a div after I load in new HTML content via AJAX. I have a hashbang linking system that loads up particular HTML snippets if certain hashes are present in the URL. The div height resizes correctly when links are pressed to load in the content, but the computed height of the loaded content is consistently 20px less when the page is navigated to directly.

HTML: 

<div id="help_page_header">
      <h3>Need some help with searches?</h3>
      <ul class="help_tabs">
        <li class="help_tab"><a class="docs_link" rel="recommendations" href="#!/recommendations">Recommendations</a></li>
        <li class="help_tab"><a class="docs_link" rel="whats_hot" href="#!/whats_hot">What's Hot</a></li>
        <li class="help_tab"><a class="docs_link" rel="history" href="#!/history">History</a></li>
        <li class="help_tab"><a class="docs_link" rel="misc" href="#!/misc">Additional Features</a></li>
      </ul>
      </div>
      <div class="help_page_content">
        <p>Select a help topic above!</p>
      </div>
 ...

jQuery:

$(document).ready(function(){
  if(window.location.hash)
  {
    loadContent(window.location.hash)
  }

  $(".docs_link").click(function(e){
    $(".help_page_content").html("")
    var fragment = this.hash
    loadContent(fragment)
  });

  function loadContent(fragment)
  {
    fragment = fragment.slice(1).replace(/!\//g, "");
    $(".help_page_content").load("./"+fragment+".html", function(){
      var height = $("#ajax_page_wrap").outerHeight();
      $(".help_page_content").animate({height: height}, 500);
    });
  }
});

An example to clarify:

If I navigate to www.homepage.com/docs/ directly, and then click one of the help links to load content, the height is computed fine. However, if I navigate to www.homepage.com/docs/#!/history, the computed height is always about 20px less than it should be.

Christian Benincasa
  • 1,215
  • 1
  • 21
  • 45
  • Would it be possible for you to create jsfiddle of this? – ubik May 16 '12 at 20:14
  • I'm entirely sure how to get AJAX requests working in jsFiddle..however I uploaded these files to the staging subdomain of my site and the problem disappeared...it seems to only happen on the localhost site. @Alex the content area isn't padded. – Christian Benincasa May 17 '12 at 18:41

1 Answers1

0

Is there an image inside the #ajax_page_wrap div that is not yet loaded when you navigate directly there (and the AJAX call is completing before it's loaded)?

What about using $(window).load (which waits for all the images to load) instead of $(document).ready (which does not). See this answer.

Hope the helps! Lemme know if that's not the issue and I'll keep brainstorming :)

Community
  • 1
  • 1
goggin13
  • 7,876
  • 7
  • 29
  • 44