Griddle and Crosshairs!

"Cowboy" Ben Alman http://benalman.com/

by John Schulz

HTML

<!-- WOOHOO CSS 1 + HTML 2 = WEB 3.0! -->

Hover me
<table>
    <tr>
        <td></td>
    </tr>
</table>

CSS

td {
    border: 1px solid #777;
    background: #aaa;
    width: 5px;
    height: 5px;
    padding: 0;
    margin: 0;
    cursor: default;
}

JavaScript

// Create a big square grid from a single cell/row table.
$.fn.griddle = function( num ){
    
    function griddle( elem ) {
        $.each( Array( num - 1 ), function(){
            elem.clone().insertAfter(elem);
        });
    };
    
    return this.each(function(){
        var table = $(this);
        griddle( table.find('td') );
        griddle( table.find('tr') );
    });
};

// Get all other cells in the selected cell's row+column.
$.fn.crosshairs = function(){
    var elems = [];
    
    this.each(function(){
        var cell = $(this),
            row = cell.parent(),
            idx = row.children().index( cell );
        
        elems.push.apply( elems, cell.siblings().get() );
        
        row.siblings().each(function(){
            elems.push( $(this).children().eq( idx )[0] );
        });
    });
    
    return this.pushStack( elems, 'crosshairs' );
};

$('table')
    .griddle( 50 )
    .delegate( 'td', 'mouseover', function(e){
        var hex = ('00'+(Math.random()*4096<<0).toString(16)).replace(/.*(...)/,'#$1');
        $(e.target).crosshairs().css( 'background', hex );
    });

// that was annoying