Row and Column input picker

Question

I've created a simple picker which is going to be used to select the number of rows and columns when constructing a table.

Here's the example: http://jsfiddle.net/tnn3qgvj/8/

HTML

<input type="text" value="1 x 1" class="grid-chooser"/>
<div class="grid"></div>

JavaScript

$(function () {
    var rows = 5;
    var cols = 5;

    // create the grid
    var grid = '<div class="grid">';
    for (var i = 0; i < rows; i++) {
        grid += '<div class="row">';
        for (var c = 0; c < cols; c++) {
            grid += '<div class="square"><div class="inner"></div></div>';    
        }
        grid += '</div>';
    }
    grid += '</div>';

    var $gridChooser = $('.grid-chooser');    
    var $grid = $(grid)
        .insertAfter($gridChooser);


    var $allSquares = $('.square');

    $grid.on('mouseover', '.square', function () {
        var $this = $(this);
        var col = $this.index() + 1;
        var row = $this.parent().index() + 1;
        $allSquares.removeClass('highlight');
        // select all the rows and cols indexed lower than 
        // the one under the mouse
        $('.row:nth-child(-n+'+row+') .square:nth-child(-n+'+col+')')
            .addClass('highlight');
        $gridChooser.val(col + ' x ' + row)
    })

});

CSS

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.grid-chooser + .grid {
    width: 120px;
    height: 120px;
    background: rgba(0,0,0,0.2);
    position: relative;
    padding: 2px;
    display: none;
}

.grid-chooser:focus + .grid {
   display: block;
}

.grid-chooser + .grid .row:first-child .square:first-child .inner {
   background: rgba(0,0,0,0.4);
}

.grid-chooser + .grid .square:first-child {
    margin-top: 0;
}

.grid-chooser + .grid .row {
    height: calc(100%/5);
}

.grid-chooser + .grid .square {
    height: 100%;
    width: calc(100%/5);
    display: inline-block;
    margin: -2px 0;
    padding: 1px;
}

.grid-chooser + .grid .square:hover .inner, 
  .grid-chooser + .grid .square.highlight .inner {
    background: rgba(0,0,0,0.4)
}

.grid-chooser + .grid .inner {
    height: 100%;
    width: 100%;
    border-radius: 3px;
    background: rgba(0,0,0,0.2);
}

I'm interested to know if there's a more effective or efficient method of selecting the square elements that appear before the mouseover, or any other improvements!

Answer 1

You're using calc() when there's no need for it because you already know the size of the parent element and you're not mixing units. You're also not providing a fallback for browsers that don't support calc(), which in turn makes your entire demo appear as though it doesn't work.

.grid-chooser + .grid .row {
    height: 23px;
}
.grid-chooser + .grid .square {
    height: 100%;
    width: 23px;
}

If you want to be able to change the size of your picker without having to recalculate the sizes of the descendant elements, you should be using variables via CSS preprocessors. In addition to increasing your browser support, you'll also have a marginally smaller file.

You're using display: inline-block here when float: left would be a better choice. Using negative margins to remove the space between inline elements is not reliable under any circumstance, ever.

.grid-chooser + .grid .square {
    float: left;
    padding: 1px;
}

You can eliminate need for the .inner element using this CSS (you'll need to modify your JS to match):

.grid-chooser + .grid {
    width: 120px;
    height: 120px;
    background: rgba(0, 0, 0, 0.2);
    position: relative;
    padding: 2px;
}
.grid-chooser + .grid .row:first-child .square:first-child {
    background: rgba(0, 0, 0, 0.4);
}
.grid-chooser + .grid .square {
    height: 22px;
    width: 22px;
    float: left;
    margin: 1px 0 0 1px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.2);
}
.grid-chooser + .grid .square:hover,
.grid-chooser + .grid .square.highliger {
    background: rgba(0, 0, 0, 0.4)
}