Cell Magnifier

magnifies cells when hovering

by Philippe Guglielmetti

HTML

<body>
     <h1>Magnify table cell on hover - jQuery</h1>

    <table width="400px" height="300px">
        <tr>
            <th class="w8">Group</th>
            <th class="w5">1</th>
            <th class="w5">2</th>
            <th class="w2">&nbsp;</th>
            <th class="w5">3</th>
            <th class="w5">4</th>
            <th class="w5">5</th>
            <th class="w5">6</th>
            <th class="w5">7</th>
            <th class="w5">8</th>
            <th class="w5">9</th>
            <th class="w5">10</th>
            <th class="w5">11</th>
            <th class="w5">12</th>
            <th class="w5">13</th>
            <th class="w5">14</th>
            <th class="w5">15</th>
            <th class="w5">16</th>
            <th class="w5">17</th>
            <th class="w5">18</th>
        </tr>
        <tr>
            <th class="lbl">4</th>
            <td class="xs">
                <div class="at_num">19</div>
                <div class="symbol"><a class="symb" href="potassium/"><abbr class="sym" title="potassium: essential data and description">K</abbr></a>

                </div>
                <div class="at_wt">39.098</div>
            </td>
            <td class="xs">
                <div class="at_num">20</div>
                <div class="symbol"><a class="symb" href="calcium/"><abbr class="sym" title="calcium: essential data and description">Ca</abbr></a>

                </div>
                <div class="at_wt">40.078</div>
            </td>
            <td></td>
            <td class="xd">
                <div class="at_num">21</div>
                <div class="symbol"><a class="symb" href="scandium/"><abbr class="sym" title="scandium: essential data and description">Sc</abbr></a>

                </div>
                <div class="at_wt">44.956</div>
            </td>
            <td class="xd">
                <div class="at_num">22</div>
                <div class="symbol"><a class="symb" href="titanium/"><abbr class="sym"...

CSS

table {
    table-layout:fixed;
    /*table-layout:fixed; is mandatory to make large tables small*/
    border: none;
    border-spacing: 0;
    border-collapse: collapse;
}
th, td {
    padding:3px;
    border: 1px solid lightgray;
}

JavaScript

function _integral(x, x1, x2) {
    //return integral between x1 and x2 under triangle peaking at (x,2) 

    if (x2 <= x) {
        return (x1 + x2) * (x2 - x1) / x;
    }
    if (x1 >= x) {
        return (2 - x1 - x2) * (x1 - x2) / (x - 1);
    }
    return _integral(x, x1, x) + _integral(x, x, x2);
}

function repartition(x, n) {
    /*divide 1 into n fractions such that:
    - their sum is 1
    - they follow a triangular linear repartition where x/1 is the maximum
    (see Goulib.math2)
    */
    w = 1 / n;
    res = [];
    for (var i = 0; i < n; i++) {
        res.push(_integral(x, i * w, (i + 1) * w));
    }
    return res;
}

$("td").mousemove(function (a) {
    var x = a.clientX;
    var y = a.clientY;
    var cell = $(this);
    var row = cell.parent();
    var table = row.parent();

    var position = table.position();

    x = x - position.left;
    y = y - position.top;
   
    var height = table.height();
    var width = 300; // table.width();

    x = x / width;
    y = y / height;

    var rows = table.children('tr');
    var first = rows.filter(':first').children();

    var w = repartition(x, first.length);
    var h = repartition(y, rows.length);
    
    height=height/rows.length;

    rows.each(function (r, tr) {
        $(tr).children().each(function (c, td) {
            $(td).css("height", 100*h[r]+"%");
            $(td).css("font-size", (3000*h[r]*w[c])+"%");
            if (r==0) { // we need to assign width only on a single row
                $(td).css("width", 100*w[c]+"%");
            }
        });
    });

});

$("table").hover(

function () { // hovering is processed in mousemove
},

function () {
    //remove all attributes
    var table = this;
    var first = table.children('tr:first').children();
    console.log("clean" + table);
    first.each(function (i, cell) {
        console.log("clean" + i + cell);
        $(cell).css("width", "");
    });
});


$("td").hover(

function () {
    $(this).css("background",...