Overlay div on td one row above hovered td

Question

I have a table that his comprised of 3 columns and n number of rows. What I'm trying to do is this. When you hover over a td all the td's above that will be "shaded" I tried doing this with just a onmouseover and box-shadow but the text would appear above the shadow. So then I thought, why not just make a div with a transparent background and put the box shadow there? When I insert the div in firebug it works great. So I moved on to trying to get the div to be created dynamically with jQuery. He're's the relevant code from my js file that worked for the box shadowing stuff.

TL;DR: I need to create div's on all td's directly above the one your hovering over and do a box-shadow inset

All of this is on a td mousover

    var col , row, t=$(this);
    col = t.index();
    row= t.closest('tr').index();
    var end = 3 * row + col -1;

  while(end > 0){

      var i=1;
      var tdLeftPosition = $('td:eq('+ end-3 +')').offset().left;
      var tdTopPosition = $('td:eq('+ end-3 +')').offset().top;
      var tdWidth = $('td:eq(2)').css('width');
      var tdHeight = $('td:eq(2)').css('height');

      $("<div class = 'shadow-box' id='divTdOverlay"+i+"' style='height:"+ tdHeight+"px;width:"+ tdWidth +"px;top:"+ tdTopPosition +"px;left:"+ tdLeftPosition +"px;' />");
//This is the box shadowing that I have comented out
//    $('td').slice(end-3, end-2).stop().animate({boxShadow: '0 0 170px #000000 inset'}, 'fast');
      i++;
      // used to get the td's position in the array one row up 
      end -= 3;
  }

So when I try the mouseover on my site I get this error

Syntax error, unrecognized expression: NaN)
throw new Error("syntax error, unrecognized expression: " +msg );

and it's in Line 4267 of the uncompressed jQuery file

EDIT:

Figured it out. For some reason the end-3 part was causing the error so I put that in a variable called prevrow and replaced the end-3 with it

 var i=1;
 var prevrow = end-3;
 var tdLeftPosition =  $('td:eq('+ prevrow +')').offset().left;
 var tdTopPosition = $('td:eq('+ prevrow +')').offset().top;
 var tdWidth = $('td:eq(2)').css('width');
 var tdHeight = $('td:eq(2)').css('height');

But the div still isn't showing up. On to that problem: If anyone has any suggestions I'd still appreciate them.

kmb64 · Answer 1 · 2012-09-03T11:54:31.353

Here is how I would do it:

You can quickly and easily test this by saving this as an HTML page and opening it up in your browser!

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js""></script>
    <style>
        td {
            padding: 5px;
        }
        .shadow-box {
            padding: 5px;
            display: none;
            position: absolute;
            background: rgba(0, 0, 0, 0.7); 
            z-index: 10;

        }
    </style>
    <script>
        var getRow = function(td) {
            var row = td.parent().parent().children().index(td.parent());
            return row;
        }
        var getCol = function(td) {
            var col = $(td).parent().children().index(td);
            return col;
        }

        $(function () {         

            $('td').each(function () {

                var $this = $(this);
                var pos = $this.position();
                var width = $this.width();
                var height = $this.height();

                $('body').append("<div class='shadow-box "+ getRow($this)  +getCol($this) +"' style='width:" + width + "px; height: " + height + "px; top: " + pos.top + "px; left: " + pos.left + "px;'></div>");       

            });

            $('.shadow-box').hover(function () {
                $(this).hide();
            });


            $('td').hover(function () {

                var col = getCol($(this));
                var row = getRow($(this));

                shadeCells(col, row);
            });

            function shadeCells(col, row) {

                $('td').each(function () {

                    var $this = $(this);
                    var thisRow = getRow($this);
                    var thisCol = getCol($this);

                    if ((thisCol == col) && (thisRow < row)) {

                        $('.' + thisRow + thisCol).show();
                    }

                    else{
                        $('.' + thisRow + thisCol).hide();
                    }

                });

            }
            $('table').mouseleave(function () {
                $('.shadow-box').hide();
            });
        });
    </script>
</head>
<body>

    <table>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
    </table>

</body>
</html>

Overlay div on td one row above hovered td

1 Answers1