Make this retrocomputing scanline rock. Scan multiple lines in div is hard

Question

Working fiddle be here: http://jsfiddle.net/WyXLB/1/

When a HTML element contains multiple lines of text, I want to scan over each one. At the moment, I am just scanning over the bounding rectangle of the entire element.

Some code is :

function run_scan(el,mask,callback) {
    // we need to go over each line of text in here
    // or somewhere
    var el_font_size = $(el).css('font');
    $('body').append(sizer);
    sizer.css({
        'position': 'absolute',
        'font' : el_font_size,
        'white-space' : 'pre' } );
    var real_box = window.getComputedStyle(sizer[0]);
    var real_width = parseFloat(real_box.width);
    var real_height = parseFloat(real_box.height);
    var lines = Math.round($(el).height()/real_height);
    var mask_offset = $(mask).offset();
    var origin_left = mask_offset.left;
    var duration = parseFloat($(mask).width())/2.0;
    $(mask).animate( {
        'left':origin_left+$(mask).width()
        },
        {
            duration:duration,
            complete:callback
        } );
}

How can I break the animation over the entire bounding rectangle, to scan over each line. I tried putting an animation->callback recursion in the above function, descending the mask by one real_height each call, but got unpredictable/chaotic behavior.

Nice coding :) If there are line breaks involved you could check for them. Or you could try to put each line between `` tags with jQuery? That way you wouldn't have to edit the scan function. — Brainfeeder, Mar 11 '13 at 12:30
You will need to have 2 masks one with border for the line and the second for the lines that need to be hidden and the height of the mask need to be the size of the one line. You will need to run animation in a loop for the number of lines, run next line when first is finished. — jcubic, Mar 11 '13 at 12:35
@jcubic yes! You understand. I am currently trying to work out how to run this line loop animation pattern. — Cris Stringfellow, Mar 11 '13 at 12:40

score 1 · Accepted Answer · answered Mar 11 '13 at 12:50

If you need only loop then it should look like this (inside run_scan)

    var i = 0;
    function loop() {
        if (++i < lines) {
            $(mask).animate({
                'left':origin_left+$(mask).width()
            },{
                duration:duration,
                complete:loop
            });
        } else {
            // last line
            callback();
        }
    }

Make this retrocomputing scanline rock. Scan multiple lines in div is hard

1 Answers1