Cell Magnifier

magnifies cells when hovering

by Philippe Guglielmetti

HTML

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<body>
     <h1>Magnify table cell on hover - jQuery</h1>

    <table width="400px" height="300px">
        <thead>
            <tr>
                <th>x/heure</th>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
                <th>6</th>
                <th>7</th>
                <th>8</th>
                <th>9</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>(a)</td>
                <td>(a)</td>
                <td>(a)</td>
                <td>(a)</td>
                <td>(a)</td>
                <td>(a)</td>
                <td>(a)</td>
                <td>(a)</td>
                <td>(a)</td>
            </tr>
            <tr>
                <th>2</th>
                <td>(b)</td>
                <td>(b)</td>
                <td>(b)</td>
                <td>(b)</td>
                <td>(b)</td>
                <td>(b)</td>
                <td>(b)</td>
                <td>(b)</td>
                <td>(b)</td>
            </tr>
            <tr>
                <th>3</th>
                <td>(g)</td>
                <td>(e)</td>
                <td>(d)</td>
                <td>(c)</td>
                <td>(m)</td>
                <td> (h)</td>
                <td> (m)</td>
                <td>(m)</td>
                <td>$$\sqrt{9}+9-9$$</td>
            </tr>
            <tr>
                <th>4</th>
                <td> (i)</td>
                <td>(l)</td>
                <td>(e)</td>
                <td>(d)</td>
                <td>(c)</td>
                <td>$$\sqrt{6*6}*\overline{.6}$$</td>
                <td> (j)</td>
                <td> $$8-\sqrt{8+8}$$</td>
                <td>$$\sqrt{9}+9/9$$</td>
            </tr>
            <tr>
                <th>5</th>
               ...

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 () {
   ...