Today I wanted to slide a row up, and then when it had finished sliding I wanted to remove it from the DOM. Essentially giving it a nice effect when something is deleted.

Given that the height of a row is controlled by it’s content, I figured the easiest way to do this would be to wrap all of the content inside each column with a block element, in this case a div, and then resize those.

jQuery makes this extremely easy :

var el = $(options.element_prefix + id);
el.children("td").each(function() {
    $(this).wrapInner("< div />").children("div").slideUp(function() {el.remove();})
});

NOTE : The div tag in the wrapInner() is malformed because it won’t display properly otherwise. Please remove the space between the opening bracket and ‘div’.

It’s all pretty easy to understand. Essentially my root element is a row, and so for each td in that row wrap it’s content in a div. Then for the child divs in each td, run the slideUp() method. The callback in the slideUp() method says after the animation is done, remove the row. Given the speed of computers these days, no one will notice that the last few columns quite likely just vanish instead of complete their animation.

After a quick search I found a great page with some tips on how to better layout forms using CSS, and some new tags such as Fieldset, Label and Legend. This allowed me to create the forms I needed in half the time, using half the markup. The end result were forms that look at least twice as good as the forms I’d created using my old ways and means.

It just reinforces to me how important it is to keep up in IT!