title: Animate ul li.active within view site
body: <p>I have a pagination like this </p>
  
  <pre><code>&lt;div&gt; ( =400px )
  &lt;ul&gt; ( =2000px )
  &lt;li&gt;1&lt;div&gt;1&lt;/div&gt;&lt;/li&gt;
  &lt;li&gt;2&lt;div&gt;2&lt;/div&gt;&lt;/li&gt;
  &lt;li&gt;3&lt;div&gt;3&lt;/div&gt;&lt;/li&gt;
  ..
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The pagination goes up to 100 and is about 2000px width. However, the div is only 400px width with <code>overflow:hidden</code> This means only a certain amount of <code>li</code> is visible. I also have two buttons do do animation left and right, this way a visitor can 'slide' left and right trought the pagination:</p>
  
  <pre><code>$(".right").live('click', function(){
    $(ul).animate({"left": "-=140px"}, "fast");
  });
  
  $(".left").live('click', function(){
    $(ul).animate({"left": "+=140px"}, "fast");
  });
  </code></pre>
  
  <p>The problem is that at a certain point the 'active'(Class) pagination number is out of sight (the reason is not important in this question) </p>
  
  <p>I would like to have control over the <code>li.active</code> trough whatever Jquery event or on document ready. I would like the <code>li.active</code> to be visible in 400px div all the time. So that means the ul would move left or right relative to the <code>li.active</code> so that the <code>li.active</code> will not be in the part that is 'hidden' (overflow:hidden) </p>
  
  <p>I hope my question is clear, I cant post all the code do to its big size. (it would only complicate things..) </p>