Question

I want to create a baseline grid for my website that shows always baselines to the bottom of the page.

What I do is I create one initial baseline that is styled through css.

<figure id="lines">
    <div class='base-line bl1'></div>
</figure>

and then create new ones till I reach the bottom of the document.

<script type="text/javascript">
        $(document).ready(function() {
            var diff = Math.floor( $('body').height() / $('.base-line').height() );
            for ( var i = 1; i <= diff; i++ )
                $('#lines').append("<div class='base-line bl" + i + "'></div>");
        });
    </script>

However when I resize the page (e.g. decrease the height) there are baselines left over. And when I increase the height of the document dynamically (e.g. change some values with a media-query) the baselines don’t reach the bottom of the page.

Is it possible to right a resize-handler that adds and removes the baselines when resizing? I guess it’s rather unperformant if I delete all base-lines on each resize and draw all of them for each resize-state.

Any ideas on that?

Answer 1

Assuming this is the function that creates the base lines

function addBaseLines(){
    $('#lines').clear();
    var diff = Math.floor( $('body').height() / $('.base-line').height() );
    for ( var i = 1; i <= diff; i++ ){
       append("<div class='base-line bl" + i + "'></div>");
    }
}

You could do this

var timeout = null;

$(window).resize(function(){
    if (timeout!=null){
        clearTimeout(timeout);
    }
    timeout = setTimeout( addBaseLines, 1000); // only do when the user is "done" 

});

See in JSFiddle

Performance is not terrible if you use the timeout…

To improve performance, just removes the ones out of sight, but I think it’s not that critical