Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Styling Contiguously Selected Table Cells

Styling Contiguously Selected Table Cells

Problem

I have a table with selectable cells (via jQuery-UI selectable). Cells are selected individually, via cmd/ctrl-clicking, and via lasso. Selected cells get the "ui-selected" class. I style the selection by adding a 1 pixel thick orange border to that class. This looks silly when contiguous cells are selected. Please see this fiddle to play with it: http://jsfiddle.net/derekprior/UxwD4/

What I'd like to do is draw the orange border only on sides where the neighboring cell is not also selected. By neighboring I mean both in the same row and in the row above and below. The result should be a single outline around the entre contiguous selection.

Can this be done with pure CSS? CSS3 selectors are fair game provided they are supported well enough in Firefox, Chrome, and Safari. If not, how about Javascript?

Problem courtesy of: Derek

Solution

http://jsfiddle.net/UxwD4/14/

$(function(){

    $("tbody").selectable({
        filter: 'td:not(.user)',
        stop: doIt
    });

    var cssClass = "ui-selected";
    var withBorder = "1px solid #F39814";
    var noBorder = "1px solid #dddddd";

    function doIt(){        
        $("td").css("border", noBorder);

        $("td." + cssClass).each(function(){
            var $this = $(this);
            var col = $this.index();

            $this.css("border", withBorder);

            if($this.prev().hasClass(cssClass)){
                 $this.css("border-left", noBorder);
            }

            if($this.next().hasClass(cssClass)){
                 $this.css("border-right", noBorder);
            }

            if($this.parent()
                   .prev()
                   .children().eq(col)
                   .hasClass(cssClass)){

                    $this.css("border-top", noBorder);
            }

            if($this.parent()
                   .next()
                   .children().eq(col)
                   .hasClass(cssClass)){

                    $this.css("border-bottom", noBorder);
            }
        });
    }

});
Solution courtesy of: James Montagne

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Styling Contiguously Selected Table Cells

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×