title: Adjust to dynamic contentwidth with custom jquery scroll bar
body: <p><a href="http://jsfiddle.net/Hermansen/Ex4G8/11" rel="nofollow">fiddle</a></p>
  
  <p>I have to display some data in a fixed div. It will usually show all the data in 1 column, but i need it to slide out so i can display the data in several columns (just stacked next to each other displayed as inline-block).</p>
  
  <p>Using the ordinary scrollbar everything works great (<a href="http://jsfiddle.net/Hermansen/Ex4G8/10" rel="nofollow">fiddle</a>).</p>
  
  <p>But when I set up a new scrollbar I can't get it to change the contentwidth, I've tried changing the width of ".jspContainer" while I change width of the scrollbar. I've also tried fiddeling with the api, but I can't get it to work as intended (not sure i grasp the internals of the functions)</p>
  
  <p>Is there a way to solve my problem in JScrollpane or is there another plugin that can help me out?</p>
  
  <p>Html</p>
  
  <pre><code>&lt;body&gt;
  &lt;button id="animate"&gt;Animate&lt;/button&gt;
  &lt;button id="reinit"&gt;reinit with new width&lt;/button&gt;
  &lt;button id="destroy"&gt;Remove JScrollpane&lt;/button&gt;
  &lt;div id="scroller"&gt;
      &lt;div id="a1" class="content"&gt;hello&lt;/div&gt;
      &lt;div id="a2" class="content"&gt;hello&lt;/div&gt;
      &lt;div id="a3" class="content"&gt;hello&lt;/div&gt;
      &lt;div id="a4" class="content"&gt;hello&lt;/div&gt;
      &lt;div id="a5" class="content"&gt;hello&lt;/div&gt;
      &lt;div id="a6" class="content"&gt;hello&lt;/div&gt;
      &lt;div id="a7" class="content"&gt;hello&lt;/div&gt;
      &lt;div id="a8" class="content"&gt;hello&lt;/div&gt;
      &lt;div id="a9" class="content"&gt;hello&lt;/div&gt;
      &lt;div id="a10" class="content"&gt;hello&lt;/div&gt;
      &lt;div id="a11" class="content"&gt;hello&lt;/div&gt;
      &lt;div id="a12" class="content"&gt;hello&lt;/div&gt;
      &lt;div id="a13" class="content"&gt;hello&lt;/div&gt;
      &lt;div id="a14" class="content"&gt;hello&lt;/div&gt;
      &lt;div id="a15" class="content"&gt;hello&lt;/div&gt;
      &lt;div id="a16" class="content"&gt;hello&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>var scroller = $("#scroller").jScrollPane().data('jsp');
  $(document).ready(function () {
  $("#destroy").click(function () {
      scroller.destroy();
  });
  });
  
  $(document).ready(function () {
  $("#reinit").click(function () {
      scroller.reinitialise(contentWidth=450);
  });
  });
  
  $(document).ready(function () {
  $("#scroller").jScrollPane();
  });
  
  
  var windowsize = $(window).width();
  $(document).ready(function () {
  windowsize = (windowsize - 200) / 225;
  i = Math.floor(windowsize);
  flwidth = "200"
  switch (i) {
      case 0:
          flwidth = "225";
          break;
      case 1:
          flwidth = "450";
          break;
      case 2:
          flwidth = "450";
          break;
      case 3:
          flwidth = "647";
          break;
      case 4:
          flwidth = "647";
          break;
          /* and so on */
  };
  $("#animate").click(function () {
      $("#scroller").animate({
          width: flwidth
      }, 400);
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#scroller {
  right:50px;
  position:fixed;
  overflow-y:scroll;
  overflow-x:hidden;
  height:600px;
  /* in reality height is 100% */
  background:rgba(0, 0, 0, 0.2);
  width:225px;
  }
  
  #destroy
  {
  float:right;
  margin-right:50px;
  }
  
  .content {
  height:75px;
  padding:1px;
  padding-left:6px;
  width:200px;
  cursor:pointer;
  display:inline-block;
  background:rgba(102, 139, 195, 0.2);
  }
  #a1, #a3, #a5, #a7, #a9, #a11, #a13, #a15 {
  background:rgba(102, 139, 195, 0.5);
  }
  </code></pre>