How do I get my horizontal JavaScript program to stop "flashing" vertically upon loading

My website is wordswithfriends.net

I downloaded a free news ticker JavaScript program. It works perfectly except upon loading, especially on slow connection开发者_如何学Gos, all of the news ticker items will display vertically in plain HTML for a brief second. The desired behavior would be to show a blank news ticker until the items are ready to scroll. The source code is here

http://www.wordswithfriends.net/mytourney/widgets/min.js

http://www.wordswithfriends.net/mytourney/widgets/scroller.js

Unfortunately, due to the sparse information provided in your question, and from the source code of the scroller.js script that the div that contains the news items to be scrolled has the class tickercontainer.

I can only assume that the new items inside the div with the class tickercontainer are loaded with everything else on the page, only after this div is loaded (when the DOM is ready) does the scroller.js script style the div and it's contents and start the ticker.

You could try adding this to your CSS:

#ticker01 {
    display:none;
}

And one more line in the script tag above the ul:

$(function(){
    $("ul#ticker01").show();
    $("ul#ticker01").liScroll();
});

Try to add a class to all the news items and apply a 'display:none' style to that class. You may need to initialize the first element on the document ready event. This should get rid of the initial flash of all the news items.

Unfortunately, due to the sparse information provided in your question, and from the source code of the scroller.js script that the div that contains the news items to be scrolled has the class tickercontainer.

I can only assume that the new items inside the div with the class tickercontainer are loaded with everything else on the page, only after this div is loaded (when the DOM is ready) does the scroller.js script style the div and it's contents and start the ticker.

I would suggest you initially set the visibility or display styles of tickercontainer to hidden or none either in the style tag within the head tag of your HTML, or in an external CSS file and once the scroller.js script has initialised use jQuery to set the visibility or display styles to visible or block.

If this is not what you are looking for then please expand on your question and I'll try my best to answer.