Geek asks and answers

Extend this div unfold fully in the CSS line block

I want this scan line effect to work correctly. To show text from left to right. As if the cathode ray burns it in phosphors on the screen.

The idea is to glide over black rows that have a transparent tip. Here is an 80% working demo. enter image description here The rightmost black .maskdiv in each row will not expand. It should be.

I tried to save the right div .maskwith a black background as an inline block and make it full width. I understand a little why the request does not work (width: 100% clicks the other inline blocks on the next line, as it is right), but there should be a way to get this full right side without breaking the width 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;
}
+5
1

jsbin, ( ).. , / http://jsbin.com/uteyik/12/.. :

CSS

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

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

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;
    }    
 });

: . position: absolute , x. , , , 100%, , , , , .

: , (.. ): http://jsbin.com/uteyik/9 ( )

+2

More articles:


All Articles