Javascript News Scroller

Question

see the news scroller on the top of this site

http://track.dc.gov/Agency/DH0

Any idea what library/functions this site uses to implment such a smooth scroller?

Answer 1

jQuery enthusiast, Remy Sharp, has his own Marquee Plugin that you can implement pretty easily. You can gather deeper details of it on his blog or by visiting the demo page.

For Mootools users, there's Mooquee.

You can also view the actual code for this example online at http://track.dc.gov/Resource/Script/ - do a search for "uiEndless" to find the target-scripting.

Answer 2

They have a very nicely formatted block of code you can study. Open your favorite JS debugger when you visit the site, wait for everything to get moving, and then press "Break All" or the equivalent in your debugger. You'll see something like the following:

Dashboard.UI.EndlessLine = function() {
    var me = this;
    me.jq = $(me);
    me.classNames = { CONTAINER: "uiEndless", VIEW: "uiEndlessView", CANVAS: "uiEndlessCanvas", TILE: "uiEndlessTile" };
    var canvas = null;
    var view = null;
    var tiles = null;
    var x = 0;
    var xx = 0;
    var canvasWidth = 0;
    var step = 1;
    var delay = 40;
    me.initialize = function(container, data, handler) {
        required(container, "container");
        required(data, "data");
        required(handler, "handler");
        container.addClass(me.classNames.CONTAINER);
        view = newDiv(me.classNames.VIEW);
        canvas = newDiv(me.classNames.CANVAS);
        view.append(canvas);
        container.append(view);
        x = 0;
        xx = 0;
        canvasWidth = 0;
        tiles = me.populateTiles(data, handler);
        container.click(function() {
            if (me.started()) me.stop(); else me.start();
        });
    };
    me._resize = function(size) {
    };
    var moveId = 0;
    me.start = function() {
        me.stop();
        me.tick();
    }
    me.stop = function() {
        if (moveId > 0) clearTimeout(moveId);
        moveId = 0;
    }
    me.started = function() {
        return moveId > 0;
    };
    me.tick = function() {
        var tile = tiles.current();
        var width = tile.calculatedWidth;
        if (x < width - step) {
            x += step;
        } else {
            x = 0;
            tile.css("left", canvasWidth + "px");
            if (tiles.advance()) {
                xx = 0;
                canvasWidth = 0;
                do {
                    current = tiles.current();
                    width = current.calculatedWidth;
                    current[0].style.left = canvasWidth + "px";
                    canvasWidth += width;
                } while (!tiles.advance());
            } else {
                canvasWidth += width;
            }
        }
        canvas[0].style.left = -(xx) + "px";
        xx += step;
        moveId = setTimeout(me.tick, delay);
    }
    me.populateTiles = function(data, handler) {
        var tiles = new Dashboard.Core.List();
        var viewWidth = view.contentWidth();
        var maxHeight = 0;
        each(data, function() {
            var tile = newDiv(me.classNames.TILE);
            handler.call(this, tile);
            tile.css({ left: canvasWidth + "px", top: 0 });
            canvas.append(tile);
            var width = tile.outerWidth();
            var height = tile.outerHeight();
            if (maxHeight < height) maxHeight = height;
            tile.calculatedWidth = width;
            canvasWidth += width; // getting width may only be done after the element is attached to DOM
            tiles.append(tile);
            view.height(height);
        });
        return tiles.createCycle();
    }
}

I'm impressed -- everything looks professional and nicely namespaced.

Update: If you want an explanation of how it works, focus on the tick method defined above. Glossing over all the details (cause I haven't really studied it myself), it calculates a step size, moves the message element to the left by the some amount, and schedules the next tick call for 40 milliseconds in the future.