tl;dr you can directly go to How can I use it? chapter to use this script.

Who am I?*

I am energetic, or even hectic (why this video? Look how beautiful and... stressful (or energetic) their dance look like) I'd say, young representant of our future - todays youth generation.

I have been thinking about cooperating with various serious companies, such as:

• FM Group (do not mix with FM Logistics),
• Bannersbroker,
• Monavie,
• Lyoness,
• Evotey,
• EcoVital (aka pots with --very high-- quality/price),
• Oriflame,
• Novision,
• Betterware,
• We Atlantis,
• OVB, and others.

Please note that I did not provide any links to those companies' websites; interpret this as me expressing that you really do not need to be aware of their existence.

All of them were just waiting for me to join them and share enormous amounts of money with me, but I am not this kind of guy. I decided to choose my own path, my destiny... Bla bla bla...

Coming back to the topic.

Herebly I would like to present to you my new achievement. Brick-table.

What's brick-table?

I am almost sure of one thing. We can see tables everywhere. In magazines, leaflets, bruchures, emails and even in the Internet. But they always look the same.

This tool allows you changing that. You can make tablets less boring and more awesome.

How does it work?

It simply moves (or changes its relative position) every odd row in table by half of its width to the right. Yes, that's all. KISS, dude.

Demo

• Table containing a lot of data.

• Excel-like table.

Coming soon.

How can I use it?

1. Go to any webpage having table (for exaple websites see last chapter)
2. Go to your Web Developer Console (probably Ctrl+Shift+J or similar, e.g. Ctrl+Shift+K in Firefox)
3. and paste content of brick-table.js (link here) script.

For your convenience I put this script here:

$('table').each(function(i, table) {
    //this function is executed once per every table, so widths are calculated only once.
    var rowsFunction = (function() {
        var cache = [];
        return function(i, e) {
            e.style['position'] = 'relative';
            e.style['left'] = cache[i] || (cache[i] = (e.clientWidth || $(e).width()) / 2) + 'px';
        }
    })()
    $(table).find('td').parent().filter(':odd').find('td').each(function(i, e) {
        setTimeout(rowsFunction, 100, i, e);
    })
})

That's all. No compilcated installation nor waiting hours for downloading.

Possible usages

• simulating building houses without stopping looking at your screen (tables look like they were bricks),
• trying what floor will look like before buying laminate flooring (aka pergo),
• increasing cleariness and readability of presented data.

Tools used

• Maxthon browser - browser achieving the best ratio (plugins/sloweness)
• jsbeautify.org - keeps code beautifuly indented
• jquery - learning cells width
• http://en.wikipedia.org/wiki/Comparison_of_Linux_distributions demonstration #1
• http://handsontable.com/ - demonstration #2 (stay tuned).
• http://www.gfycat.com - better GIF

* please, thing of that more in terms of joke or having fun than real opportunity to change my life.