Trying to create custom jQuery text-scroller
<p>I'm trying to make a own custom js-text-scroller (I want the text to scroll to the left within a div and then repeat the scrolling again and again).</p>

<p>But I'm having some problems. I really can't put my finger on where I'm doing wrong or where I need new functionality. All the help that I can get is welcome.</p>

<p>Here's a fiddle example: <a href="http://jsfiddle.net/Na373/" rel="nofollow">http://jsfiddle.net/Na373/</a></p>

<p>the HTML:</p>

<pre><code>&lt;div class="wrap"&gt;
   &lt;div class="scroll"&gt;
       &lt;ul class="active"&gt;
           &lt;li&gt;Hello World&lt;/li&gt;
           &lt;li&gt;Hello World&lt;/li&gt;
           &lt;li&gt;Hello World&lt;/li&gt;
           &lt;li&gt;Hello World&lt;/li&gt;
           &lt;li&gt;Hello World&lt;/li&gt;
           &lt;li&gt;Hello World&lt;/li&gt;
           &lt;li&gt;Hello World&lt;/li&gt;
           &lt;li&gt;Hello World&lt;/li&gt;
           &lt;li&gt;Hello World&lt;/li&gt;
           &lt;li&gt;Hello World&lt;/li&gt;
       &lt;/ul&gt;
   &lt;/div&gt;
</code></pre>

<p></p>

<p>the JS:</p>

<pre><code>$ul = $('.scroll ul');
//copys the existing ul and appends it after the existing one
$('.scroll').append($ul.clone().removeClass().addClass('not_active'));

function scroll() {
    $active = $('.scroll ul.active');

    $active.each(function() {
        $not_active = $('.scroll ul.not_active');

        // foreach time the function runs the ul goes "left: -1px;"
        var current_position = parseInt($(this).css('left'));
        var new_position = current_position - 1;
        $(this).css('left', new_position+'px');

        var parent_width = $(this).parent().outerWidth(); // gets the width of ".scroll"
        var width = $(this).outerWidth(); // gets the width of the "ul"
        var shown_all = current_position + width;

        // if the right corner of the "ul" are att the right corner of ".scroll"
        // this if statement executes and adds new existing class on the "ul.not_active"
        // and adds class ".active" instead
        // this means that there are 2 ul with the class active 
        //running simultaneously
        if (shown_all == parent_width) {
            $not_active.removeClass().addClass('active');
        }

        // here it checks if the "ul.active" have past its own length to left
        // Here im trying to make it "not_active" and put it after the existing ".active"
        //
        // &lt;ul class="active"&gt;....&lt;/ul&gt; ----&gt; &lt;ul class="not_active"&gt;...&lt;/ul&gt;
        //
        // then put it after the other "ul.active"
        //
        //            &lt;ul class="active
        // ---------&gt; &lt;ul class="not_active"&gt;&lt;/ul&gt;
        //
        // So it all beginns from the beginning
        if (current_position == '-'+width) {
            $(this).removeClass().addClass('not_active').css('left', '0');
            $(this).insertAfter($('.scroll ul').next());
        }
    });
};
// And here I run the function
setInterval(scroll, 10);
</code></pre>

<p>CSS:</p>

<pre><code>.wrap {  
    position: relative;
    padding: 10px 10px 10px;
    height: 18px;
    background: #000;
    color: #fff;
    overflow: hidden;
    width: 500px;
}
.scroll {
   width: 500px;
   white-space: nowrap;
}
.scroll ul {
    left: 0;
    position: relative;
    margin: 0;
    padding: 0;
    display: inline;
    list-style: none;
}
.scroll ul li {
    padding: 0;
    margin: 0;
    display: inline;
}
</code></pre>
