title: Loading dynamically sized page with ajax
body: <p>I have a site that is utilizing full width background images as well as dynamically sized divs for single page smooth scrolling.</p>
  
  <p>The link is <a href="http://teneo.telegraphbranding.com/" rel="nofollow">http://teneo.telegraphbranding.com/</a>.</p>
  
  <p>I want to load about.php via ajax so that the sidebar doesn't have to reload, but I'm not having any luck.</p>
  
  <p>When you click on 'About' in the sidebar the about page is not rendering correctly. It seems like the containers are ignoring the jquery. They should butt up next to the side bar but not go past it, except for the underlying background image.</p>
  
  <p>Im loading the page with this script:</p>
  
  <pre><code>$(document).ready(function () {
  var dropDown = $('.dropdown');
  $('h3.about').on('click', function() {
      dropDown.slideDown('fast', function() {
          $('#index-wrap').load('about2.php');
      });
  });
  });
  </code></pre>
  
  <p>Also, it isn't loading a couple of divs that don't have any content but have background images and are supposed to fill the screen.</p>
  
  <pre><code>$(document).ready(function () {
  var snapshotWrap = $('#snapshot-wrap');
  var w = $(window);
  w.bind('load resize',function() {
      snapshotWrap.css({ width:w.width(), height:w.height()});
  });
  </code></pre>
  
  <p>});</p>
  
  <pre><code>$(document).ready(function () {
  var snapshotContent = $('#snapshot-content');
  var w = $(window);
  w.bind('load resize',function() {
      snapshotContent.css({ width:w.width() - 205 });
  });
  </code></pre>
  
  <p>});</p>
  
  <p>Am I correctly using jquery/ajax to load the page?</p>