This particular part of this article will show you how to animate HTML tables using JavaScript. A JQuery plugin which we are going to create will animate HTML ranking tables. First you have to download code from rankingTableUpdate.js. Our particular examples will show you final race results of 2011 Formula1 season. If you are interested in any kind of sports, you definitely spend great amount of time online searching for championship standings and league tables.
Before doing any stuff we should get familiar with these kinds of ranking tables. They are in fact HTML tables having same basic structure where every row is representing particular entity like company or team. While rows represent single entity, columns are showing features of every single entity like their names and nationality and number of points they have. In these kinds of ranking tables first row represent the highest performer and the last worst performer.
We can split columns into two categories, first one is updating column and the second one is constant column because updating columns can change from one state on the table to another and constant columns are not in power of changing any rows. For example, team names and stadiums represent constant column which can’t be changed and number of points each team earned is updating column which can be changed through period of time. In this correlation one column is always acting like identifier for the entity and the other is holding the entity.
There are five things which entity can perform such as moving up and down, droping off the table, staying in the same place and apperaing for the first time. While developiny your own JQuery plugin it may seem difficult to know how modifiable to make it. It is desirable to let users adapt animation but allowing many options can make it harder to use. You should design animation with fix basic structure and allow users to change a few properties like colouring of the animation.
We should begin with the explaining phase one of creating ranking table. You should check table height and width first. After customising these parametres fading in the background colour is next logical step. After emphasizing the change you should change updating values. After doing so move through the table and see if it’s working correctly. One more time check table dimensions and shrink it if needed. After fading the background colour for the second time and updating values you should switch your old table with this new one.
I am assuming that you are using updated JQuery version and if this is not the case, you should download the latest JQuery version for better performance. JQuery plugin functiones by adding a single function to the jquery.fn framework. In order to animate old table with the new one the old one must be HTML table consisting of two parametres. To invoce the animation follow this step
$(oldTableElement).rankingTableUpdate(newTableElement);
After the animation is done you can repeat this function many times later in order to update ranking values. This function will return to JQuery object allowing it something called chaining. Be aware of the fact that the object which returned is containing original table elements and not the new one.
Each cell of the table should contain some class names such as anim :update, anim :position and anim :id. If you don’t have any of these class names then the column is updating one. Aftre adding class names to the columns you should configure the animation using options parametres. Adding option parametres you can extract id from cells, move left and right through the table, determine delay between each phase of animation, determine the time at which animation completes and allowing the animation to stay put during first stage.
When it comes to the styling your ranking table there are some restrictions such as using bottom and top cell borders, using images as background, if using border on the rows you should use border bottom and typically values are written in green color. When it comes to the browser compatibilty, these examples work perfectly in Chrome, IE8, Safari and Firefox.