Using tbodys for javascript hooks

Oct
11

by
Aaron

Using tbodys for javascript hooks

When writing the markup for the main cash flow chart, I knew that it was going to involve tables to make everything line up well while keeping the fluidity of the layout. That in of itself is a simple thing to do of course, but I also wanted to provide a certain layer of organization that made the javascript work simply. Here's a quick tip in using tbodys to provide hooks for javascript.

In the design there are groups of table rows that need to be targeted to expand and collapse the content. In a normal situation, I would wrap a div around whatever I was wanting to show/hide or toggle and use the prototype library to target it with a javascript effect. However, wrapping a div around table rows doesn't work in keeping with semantic markup. In comes the tbody. I created a "income" tbody and an "expenses" tbody to provide the hooks for the javascript. Take a look at this video to see the javascript effect in action.

Comments

Oct
13

Geof Harries

Is the month over yet? I want this app :)

Oct
13

Aaron B.

Luckily for our sake, it's not! :) We've got a busy week ahead as we really start to put all the pieces together. Lots to come...

Oct
15

Tony White

NIce. I noticed that it uses a slide animation when toggling those options. Do you have a tailor-made script for that, or are you borrowing from a js library?

Oct
15

Aaron B.

Tony: We made a custom function using the Script.aculo.us library. It looks like this:

function action_toggle(btn, element, focus) {
new Effect.toggle(element, 'blind', {duration: 0.2});
Element.toggleClassName(btn,'active');
}

Oct
18

Percy

I never really knew that you could have more than one tbody in a table. At first I thought you were breaking the XHTML standards or something, but it does in fact seem that you can use as many as you want.

Neat idea, a great way to easily isolate the income from the expenses. Could be very useful in other situations.

It's looking great, guys!

Oct
19

Aaron Boeving

Percy: I never really knew you could have more than one tbody either, heh. I also played around with nesting the tbodys based upon having income and expense categories inside of the main Income or Expenses tbodys. That, however, does not validate.

The One Month App:

Who are you guys?

We're Clear Function, a web design and development company that specializes in thinking further - designing consumer websites and products that allow for simple site maintenance and updating to be done by the client. Find out more

In partnership with:

Social Media Marketing & Search Engine Optimization Agency

Managed Network Infrastructure and Colocation Solution

Simple, Customized Website Managment

OMA: One Month App