I have the tendency to get stuck coding when something about the process clicks. The JavaScript stuff is awesome since I’m a user experience centric guy and like to see UI interactions happen in an interesting manner. CSS can do quite a bit but JavaScript gives you a lot more control.
Today, I took yesterday’s JavaScript code and used prototype lite + moo.fx to make the tab behavior a little more interesting.
Of course, shortly after finishing this code, I realized doing it the accordion way is a lot easier. grr.
But I also started reading up on mootools, prototype, and jQuery and noticed jQuery is a lot more complete and clean framework to build stuff on. I guess I’ll go study that next!
I’m getting back to my roots these days, doing more web dev stuff.
The last time I touched JavaScript was a few years back in my FileMaker days. Since then, things have changed with ajax and other fancy JavaScript+CSS tricks being developed. I’m definitely rusty.
Today I spent some time writing basic JavaScript stuff to get back into the game. Here’s what I got.
I initially tried to use CSS visibility:hide/visible combined with position:absolute, to show and hide different tab divs, but noticed positioning is very fragile across different browsers
In the end decided to use height:0px/300px along with overflow:hide to dynamically change height of the divs to create the same effect without disrupting the position.
This seems to work across all browsers without special casing which is the only way to go!