GRID and VIEWPORT TOOL

by marakoss

CSS

.grid div:nth-child(2n+1){
    background: rgba(255,0,0,0.05);
}

.grid{
    pointer-events:none;
}

.grid *{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

JavaScript

var options = {
    'columns': 24,
    'height': 20,
    'max-width': 1200
}

var renderGrid = (function(options){

        var elements = new Array(),
            wrapper = (jQuery('<div>')
                       .css({'position':'absolute','width':'100%','max-width':(options['max-width']+'px'),'height':'100%','display':'block','top':'0px','left':'0','right':'0','z-index':'9999','margin':'0 auto','pointer-events':'none'})
                       .attr('class','grid')
                       .appendTo('body')),
            documentheight = (jQuery(document).height()),
            rows = documentheight/(options['height']);


    for(var i=0;i<(rows*options['columns']);i++) {
        elements[i] = $('<div>').css({
            'width':(100/options['columns'])+'%',
            'height':options['height']-1+'px',
            'border':'1px solid rgba(0,0,0,0.2)',
            'border-top':'none',
            'border-left':'none',
            'float':'left'
        }).appendTo(wrapper);
    }
});

jQuery('.foot').click(function(){
    jQuery('.grid').toggle();
});

renderGrid(options);


var sizes = new Array();
sizes[0] = [800,600];
sizes[1] = [1023,768];
sizes[2] = [900,650];

function renderViewport(sizes){
    var colors = ['#f00','#0f0','#00f'];
    var bordersize = 3;
    var elements = new Array();
    for (var i=0;i<sizes.length;i++){
        
        elements[i] = $('<div>').css({
            'position':'fixed',
            'width':sizes[i][0]+'px',
            'height':sizes[i][1]+'px',
            'border': bordersize+'px dashed '+colors[i],
            'left':'50%',
            'margin-left':'-'+Math.round(sizes[i][0]/2)-bordersize+'px'
        }).attr('class','viewport').appendTo('body');
        
    }
}


renderViewport(sizes);