jquery / css: make text inside div scroll horizontally like a news ticker no plugin

Issue

anyone have some tips on how to make text inside a div scroll horizontally from right to left in a "news ticker" fashion without having to use a plugin. Here is an example of exactly what I'm trying to accomplish (this is a plugin solution: http://www.maaki.com/scrollingText.html).

Solution

Here's a quick solution to this: http://jsfiddle.net/4mTMw/8/

var marquee = $('div.marquee');
marquee.each(function() {
    var mar = $(this),indent = mar.width();
    mar.marquee = function() {
        indent--;
        mar.css('text-indent',indent);
        if (indent < -1 * mar.children('div.marquee-text').width()) {
            indent = mar.width();
        }
    };
    mar.data('interval',setInterval(mar.marquee,1000/60));
});​

Using the text-indent css property, you can do this rather simply.

Answered By - Korvin Szanto