Fully expand this CSS inline-block div scan-line

Question

I want this scan line effect to work properly. To reveal the text from left to right. As if the cathode-ray is burning it into the phosphors on the screen.

The idea is to slide across black rows, that have a transparent tip. Here is a 80% working demo. enter image description here The rightmost black .mask div in every row will not expand. It must.

I have tried to keep the right-most .mask div with a black background as inline-block and make it full width. I somewhat understand why the request does not work (width:100% pushes the other inline-blocks onto the next line, as is only proper), but there must be a way to get this full right hand side without hacking the widths in javascript.

.row {
        font-family:'Courier New',Courier,monospace;
        font-size:16px;
        display:block;
        height:auto;
        width:100%;
        min-width:20%;
        position:relative;
        margin-right:0px;
}

.mask {
        display:inline-block;
        width:auto; /* 100% does not work */
        background:black;
        white-space:pre;
}

you do you have js mixed up with css in your html in your jsbin? to make all our lives easier please separate the html from the js from the css.. i'm having trouble making your code run on my own machine — abbood, Mar 10 '13 at 14:03
Well, is there a necessary reason for having a style block within HTML, when you've already got a CSS file? — Volker E., Mar 10 '13 at 19:31

abbood · Accepted Answer · 2013-03-11T15:51:53.700

this won't work on jsbin becuase it uses absolute positioning (unless you view the full screen demo).. but I provided it anyways for you to copy/paste it into your own browser http://jsbin.com/uteyik/12/.. below are the change highlights:

css:

.row {
 ..
  position:absolute;   /* changed to absolute */

}
.mask {
  ..
  width:100%;  /* changed to 100% */
  position:absolute;   /*changed to absolute */
}

and javascript:

jQuery(document).ready(function() {
    function fill_box(rows) {
        var rowHeight = getSampleRowHeight();
        var thisRowHeight = 0;
        for(var i = 0; i < rows; i += 1) {
            $('.box').append('<div class="row" style="top: '+thisRowHeight+'"><div class="scan_cursor i1"> </div><div class="scan_cursor i2"> </div><div class="scan_cursor i3"> </div><div class="mask"> </div></div>');       
            thisRowHeight +=rowHeight;
        }   
    }

    fill_box(30);

    function tag_animate(el) {
        // animate the mask
        el.animate( {
            'margin-left' : '100%'
            }, 
            {
                complete : function () {        
                    tag_animate(el.parent().next().find('.mask'));
                }
            } 
        );
        // animate the stripes
        el.siblings().animate( {
            'margin-left': '100%'
            }, 
            {
               complete : function () {     
                   el.siblings().hide();
               }
            }
        );      
    }    

    tag_animate($('.box').find('.row').eq(0).find('.mask'));

    function getSampleRowHeight() {
        // get sample row height, append to dom to calculate
        $('.box').append('<div class="row" style="display: hidden"> <div class="scan_cursor i1"> </div></div>');
        var rowHeight = $('.row').height();
        $('.box').find('.row').remove();
        return rowHeight;
    }    
 });

explanation: I first create a dummy row and calculate it's height. I then create rows that have position: absolute and position it from the top using the dummy row height x row number. the idea is that I wanted to make everything with absolute positioning so that the mask doesn't push the stripes below when it's 100%, also the row has to be absolute because as I make it's contents disappear, I don't want the rows below to jump up.

bonus: see it work the opposite way (ie the text disappearing): http://jsbin.com/uteyik/9 this was my initial (and incorrect) answer

I like that. However, I want the effect to be "reveal" rather than "conceal" the text. — Cris Stringfellow, Mar 11 '13 at 05:40
lol after all that work! it's ok I shudda clarified.. back to the drawing board I guess :p — abbood, Mar 11 '13 at 05:48
yeah as i mentioned in my answer.. just copy and paste my code from jsbin into your browser directly.. for some reason jsbin is messing it up (don't forget to wrap the javascript in jsbin with jQuery(document).ready(function() {.. or just copy my javascript code from above) — abbood, Mar 11 '13 at 06:46
It works in jsbin! It works well, with the exception that the mask height is 1px off the lines, but the idea works. Thanks. Awarded. — Cris Stringfellow, Mar 11 '13 at 07:56
my apoligies @CrisStringfellow, I frankly we running late for work and I had to run.. (i will edit at the nearest chance).. it was an excellent question and it was fun trying to solve.. whenever you got similar questions in the future please lemme know! :) and thanks for the correct answer award :) — abbood, Mar 11 '13 at 07:59

Fully expand this CSS inline-block div scan-line

1 Answers1