ElasticTable is an unfinished JavaScript 'thingy' that adds fisheye style 'zooming' to html table elements. ElasticTable uses MooTools 1.1. ElasticTable has been tested and known to work with Firefox 2, Firefox 3 beta, Safari 3, Internet Explorer 7. ElasticTable has been tested and found not to work with Internet Explorer 6 and Opera 9.5.

To find out why this project is unfinished please see my rant at the bottom of the page.

Examples

Periodic Table

Group →
↓ Period		 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
1 1
H
2
He
2 3
Li		 4
Be
5
B		 6
C		 7
N		 8
O		 9
F		 10
Ne
3 11
Na		 12
Mg		 13
Al		 14
Si		 15
P		 16
S		 17
Cl		 18
Ar
4 19
K		 20
Ca		 21
Sc		 22
Ti		 23
V		 24
Cr		 25
Mn		 26
Fe		 27
Co		 28
Ni		 29
Cu		 30
Zn		 31
Ga		 32
Ge		 33
As		 34
Se		 35
Br		 36
Kr
5 37
Rb		 38
Sr		 39
Y		 40
Zr		 41
Nb		 42
Mo		 43
Tc		 44
Ru		 45
Rh		 46
Pd		 47
Ag		 48
Cd		 49
In		 50
Sn		 51
Sb		 52
Te		 53
I		 54
Xe
6 55
Cs		 56
Ba		 *
 72
Hf		 73
Ta		 74
W		 75
Re		 76
Os		 77
Ir		 78
Pt		 79
Au		 80
Hg		 81
Tl		 82
Pb		 83
Bi		 84
Po		 85
At		 86
Rn
7 87
Fr		 88
Ra		 **
 104
Rf		 105
Db		 106
Sg		 107
Bh		 108
Hs		 109
Mt		 110
Ds		 111
Rg		 112
Uub		 113
Uut		 114
Uuq		 115
Uup		 116
Uuh		 117
Uus		 118
Uuo

Calendar

Mon Tue Wed Thu Fri Sat Sun
1st 2nd 3rd 4th 5th 6th 7th
8th 9th 10th 11th 12th 13th 14th
15th 16th 17th 18th 19th 20th 21st
22nd 23rd 24th 25th 26th 27th 28th

Download

How to Add ElasticTable Functionality

JavaScript


var options={
      table: 'testTable',       //required. ID of table.
       minWidth: '',              //optional. Minimum width in px or %. Default='4%'
       minHeight: '',             //optional. Minimum height in px or %. Default='4%'
       ElasticTableEvents: '',   //optional. See below for details.
       ElasticCellEvents: '',    //optional. See below for details.
       getBindObjects:            //optional. See below for details.
 };
new ElasticTable(options);

ElasticTableEvents

ElasticTableEvents is an object that contains events that are attached to the table. As events bubble up from cells to the table event handlers that are common to all cells can be added here.

ElasticCellEvents

ElasticCellEvents is simmilar to ElasticTableEvents. The difference is that the events are bound to the object returned by getBindObject. This can be useful for events which do not bubble.

getBindObject

getBindObject is called once for each td and th in the table. The return value has the events of ElasticCellEvents attached to it.

CSS

ElasticTable requires some specific styling. It also uses classes to keep track of the state of the table.

/*the elasticTable must have it's height & width set and the table-layout set to fixed*/
 .elasticTable{
          table-layout: fixed;
          width: 30em;
          height: 30em;
}

/*the widthsetter class is added to each cell in the first row*/
 .widthsetter{
}

/*the heightsetter class is added to each cell in the first position on each row (rowspans are taken into account)*/
 .heightsetter{
}

/*A div with the class elasticliner is inserted inside each cell. All of the content of the cell is then moved into this div. This div prevents cells from stretching when we don't want them to.*/
 div.elasticliner{
          overflow:visible;
          width:0px;
          height: 0px;
          vertical-align: top;
}

/*when a cell is selected it is marked with the selected class*/
 .selected{
}

/*If a heightsetters is marked as fixedheight then it is not resized*/
 .fixedheight{
}

/*If a widthsetters is marked as fixedwidth then it is not resized*/
 .fixedwidth{
}

How it works

This explaination assumes you have an understanding of MooTools. Head over to the Mootools documentation or the excellent Mootorials to get up to speed.

ElasticTable is made from two MooTools classes:

ElasticTable: This is the main class, i.e. the one that you create an instance of to add ElasticTable functionality. This class handles the configuring the cells of the target table and adding and removing the 'selected' class to the selected cell.

CellAnimator: CellAnimator is a sub-class of the ElasticTable class. When an ElasticTable object is created the instance creates a cellAnimation object and assigns it to ElasticTable.animation. The CellAnimation object handles the animation of the ElasticTable.

Missing Feature

There is one feature that is technically possible but I didn't get round to adding: A class based system of revealing and hiding content depending on which cell has focus.

I am no longer developing this code, but if anyone is brave/talent/naive/stupid enough to continue developing it then they have my blessing. Please feel free to use this code however you see fit. If you do find a use for it please let me know as I'd like to see how it gets used.

Although I am no longer developing this code I'm happy to answer any question. You can contact me via email.

Contact

elastictable AT googlemail.com

Finally, if you have a spare minute you may like to read my rant......

A bit of history (aka my rant)

For the last 2 years or so I've been working part time and studying for a VB.net course with Computeach. When I started this project I had become extremely frustrated with the Computeach and acutelly aware that the qualification would probably not lead me to the kind of programming job that I found intresting. To address this I decided to put the course aside for a few months and teach myself something else. I decided the best approach would be to find a problem to solve rather than just learning something for the sake of learning it. The key was finding the right problem, so I came up with some criteria:

1. Focus on the user interface.The area of computing that intrests me the most is human computer interaction so doing something in this realm seemed like a good starting place.

2. Expanded my skills by learn HTML, CSS, Javascript and a framework. Prior to starting this project I'd done a bit of HTML, some very basic CSS but no Javascript. I figured learning some web stuff would be pretty useful.

3. Get feedback from professionals. This is surely the best way to determine if I can write quality code.

Now that I've called and end to the project, how would I say it went? My project did focus on the user interface. However, the 'final' version is no were near as good as I had envisaged so I reluctantly have to say that the project failed. What really annoys me about this is that it's not my fault. I constantly had to make changes and compromises due to browser inconcistencies and bugs. Ultimately having to work around these problems is what made me throw in the towel.

I still think that the project is a good idea and would be very happy for someone else to pick up where I left off. I just don't have the patience to work under such wasteful conditions. I can't decided if I admire web developers for working in the face of such adversaty or pitty them for putting up with such a mess.

I don't consider the project to have been a complete failure, I'd say I have a decent grasp on Javascript, CSS and HTML. I enjoyed using MooTools, the documentation was fantastic and I'm sure it saved my from dealing with countless browser compatibility issues. I've learnt a lot more doing this project then in any of the work I've done towards my VB.net qualification.

I'll have to wait and see regarding point 3.

I've learnt my lesson; web development isn't for me. My next project is to learn Objective-C and Cococa.