News Ticker MouseOver Issue

Question

I am having an issue with JavaScript. I am trying to make a news widget that scrolls but will stop on mouseover for reading purposes. What happens to me at the moment is it pauses on first mouseover. Then when mouseleave runs, it starts again but doubles the speed and will not stop again on mouseover. My JS knowledge is minimal and I couldn't find what I needed online.

var block_arr = $('.ticker p').map(function () { return $(this).get(0); }).toArray();

var ticker_item = $(block_arr[0]);
$(".ticker").html(ticker_item);
var ticker_width = $(".ticker").width();
var text_x = ticker_width;

console.log(block_arr.indexOf(ticker_item.get(0)));
console.log(block_arr.length);

scroll_ticker = function () {
    text_x--;
    ticker_item.css("left", text_x);
    if (text_x < -1 * ticker_item.width()) {
        ticker_item = $(block_arr[(block_arr.indexOf(ticker_item.get(0)) + 1 == block_arr.length) ? 0 : block_arr.indexOf(ticker_item.get(0)) + 1]);
        ticker_item.css("left", text_x);
        $(".ticker").html(ticker_item);
        text_x = ticker_width;
    }
}
var scrollTicker = setInterval(scroll_ticker, 10);

$('.ticker').mouseover(function () {
    clearInterval(scrollTicker);
}).mouseleave(function () {
    setInterval(scroll_ticker, 10);
});

Then I am having an issue also of a foreach loop. I need the multiple news items to follow each other, however the divs stack on top of each other and the top one does not scroll. Is there a way to hide the top div or a different loop I should be using?

 @foreach (var i in Model) 
        { 
                <div class="ticker" style="width:100%;overflow:hidden; margin-bottom:0px; position:relative">

                    @if (Html.Sitecore().Field("ContentURL", i) != null && i.Item.Fields["ContentURL"].HasValue)
                    {
                        Sitecore.Data.Fields.LinkField linkField = i.Item.Fields["ContentURL"];
                        var link = linkField.GetFriendlyUrl();

                            <p style="font-size:medium"><a href="@link" style="border: none;" target="_blank"><strong>@Html.Sitecore().Field("ContentTitle", i)</strong> - @Html.Sitecore().Field("ContentDescription", i)</a></p>                  
                    }

                //else, go to the Item
                    else

                    {     
                            <p style="font-size:medium"><a href="@i.Url" style="border: none;"><strong>@Html.Sitecore().Field("ContentTitle", i)</strong> - @Html.Sitecore().Field("ContentDescription", i)</a></p>           
                    }


                </div>
        }

Answer 1

With the JavaScript problem you just need to reassign the scrollTicker variable on mouseleave because you simply creating another interval but the variable still holds id of an old interval. So this

$('.ticker').mouseover(function () {
    clearInterval(scrollTicker);
}).mouseleave(function () {
    setInterval(scroll_ticker, 10);
});

become this

$('.ticker').mouseover(function () {
    clearInterval(scrollTicker);
}).mouseleave(function () {
    scrollTicker = setInterval(scroll_ticker, 10);
});

For the C# problem, you need to add float: left; to each div style. And then div elements will follow each other.