title: jquery horizontal slide with dynamic content
body: <p>I want to build a horizontal row of images that can been scrolled to using a fixed nav and jQuery, with a contact area at the far right (end) of the images. I have it nearly there, the problem is, the images are being dynamically brought in. So I don't know how wide it will be until runtime. In the code below the div <code>sideways</code> controls the width and Ive set it to 1000% just for testing purposes. I want to be able to work out the width of all the content and then set <code>sideways</code> to be that amount. </p>
  
  <p>Here's a demo of the below code: <a href="http://jsfiddle.net/Blender/feyzJ/" rel="nofollow">http://jsfiddle.net/Blender/feyzJ/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="nav"&gt;
      &lt;a href="#home"&gt;home&lt;/a&gt;
      &lt;br&gt;
      &lt;a href="#contact"&gt;contact&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="sideways"&gt;
      &lt;div class="images"&gt;
          &lt;div class="image"&gt;
              &lt;img src="images/img1jpg"/&gt;
          &lt;/div&gt;
          &lt;div class="image"&gt;
              &lt;img src="images/img2.jpg"/&gt;
          &lt;/div&gt;
          &lt;div class="image"&gt;
              &lt;img src="images/img3.jpg"/&gt;
          &lt;/div&gt;
          &lt;div class="image"&gt;
              &lt;img src="images/img4.jpg"/&gt;
          &lt;/div&gt;
          &lt;div class="image"&gt;
              &lt;img src="images/if-black-could-shine.jpg"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="contact"&gt;
          CONTACT
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function()
  {
    $('a[href=#home]').click(function()
    {
      $('html, body').animate({scrollLeft:0}, 'slow');
      return false;
    });
  
    $('a[href=#contact]').click(function()
    {
      $('html, body').animate({scrollLeft:$(document).width()}, 'slow');
      return false;
    });
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body
  {
  background:#E8E8E6;
  overflow-x: scroll; 
  overflow-y: auto;
  }
  
  .nav
  {
  position:fixed;
  padding-top:200px;
  padding-left:20px;
  padding-right:20px;
  float: left;
  }
  
  .sideways
  {
  padding-top:20px;
  padding-left:100px;
  width:1000%;
  height:100%;
  }
  
  .image
  {
  float: left;
  padding-right:20px;
  }
  
  .contact
  {
  float: left;
  padding-right:20px;
  }
  </code></pre>