CODEWITHSUNDEEP
javascriptjquerycss
user701510
user701510

Reputation: 5763

jquery news ticker bugging out

I'm using code I found from a tutorial to construct a news ticker that fades in and out one line at a time. It's supposed to cycle between the lines:"Story headline 1","Another Story headline 2","Some third story headline",and "A final, fourth headline". The problem is that the news ticker will eventually display more than one entry at a time. For example, I'll see something like "Story headline1Another Story headline 2". Changing the length of time it takes to display the next line of text doesn't solve, but delays showing the glitch.

Here's the full code:

<head> 
<style type="text/css"> 
/* CSS goes here */
#ticker
{
    border: 1px solid #666;
    background: #DDD;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px; 
    border-radius: 4px;
    color: #333;
    font: 13px/16px Arial,Verdana,sans-serif;
    padding: 3px 7px;
    width: 400px;
}
#ticker .divider { 
    padding: 0 4px;
}
#ticker a, #ticker a:visited
{
    color: #333;
    text-decoration: none;
}
#ticker a:hover
{
    color: #930;   
}
</style> 

</head> 

<body> 

<div id="ticker" class="newsTicker"> 
    Announcement 
    <span class="divider">|</span> 
    <ul> 
        <li><a href="">Story headline 1</a></li> 
        <li><a href="">Another Story headline 2</a></li> 
        <li><a href="">Some third story headline</a></li> 
        <li><a href="">A final, fourth headline</a></li> 
    </ul> 
</div> 



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> 
<script type="text/javascript"> 
// javascript will go here
$(function()
{
    $('#ticker').each(function()
    {
        var ticker = $(this);
        var fader = $('<span class="fader">&nbsp;</span>').css({display:'inline-block'});
        var links = ticker.find('ul>li>a');
        ticker.find('ul').replaceWith(fader);

        var counter = 0;
        var curLink;
        var fadeSpeed = 600;
        var showLink = function()
            {
                var newLinkIndex = (counter++) % links.length;
                var newLink = $(links[newLinkIndex]);
                var fadeInFunction = function()
                    {
                        curLink = newLink;
                        fader.append(curLink).fadeIn(fadeSpeed); 
                    };
                if (curLink)
                {
                    fader.fadeOut(fadeSpeed, function(){
                        curLink.remove();
                        setTimeout(fadeInFunction, 0);
                    });
                }
                else
                {
                    fadeInFunction();
                }
            };


        var speed = 1000;
        var autoInterval;

        var startTimer = function()
        {
            autoInterval = setInterval(showLink, speed);
        };
        ticker.hover(function(){
            clearInterval(autoInterval);
        }, startTimer);

        fader.fadeOut(0, function(){
            fader.text('');
            showLink();
        });
        startTimer();

    });
});
</script> 
</body> 
</html>

Upvotes: 0

Views: 784

Answers (1)

ace
ace

Reputation: 7583

I created a jsfiddle for your code. http://jsfiddle.net/playerace/Tssds/

I tested various time lenghts and the glitch happens when the fadeIn/fadeOut delays a bit and is caught by the 1000ms you set for the interval. Going through multiple tabs on your browser or in my example, loading multiple jsfiddle instance of this code will cause the glitch.

Doing the simple remove and append fixes the glitch as you can't control the user's behavior when they are browsing your page, they could be loading a lot of things.

One solution I can think of is to remove the setInterval and find some other way to disable showLink() while hovered over the ticker.

Upvotes: 2

Related Questions