DHTML KISS

I’ve been tardy in following up to the previous entries about my adventure in dhtml. Well, the floating, transparent div was a problem too. The goal was to highlight a column, but floating the div over the top of the text just served to make it harder to read. Back to the drawing board…

I fell back to the very first thing I thought of but quickly moved past because it seemed too inelegant, inefficient. Shame on me. Now I have the javascript looping over all the td’s in the table and setting the background color of each — either to the highlight color if the column is correct, or to the background color of the row otherwise (to remove the previous highlight if it existed). There’s no performance problem and this is actually more cross-browser friendly. I’m humbled. I’ve given talks including the point of the ‘evil’ of premature optimization, but it is so easy to fall into.

potential differences [/dhtml] permalink

DHTML Not So Fun

As a follow up to my previous entry, I’ve found that I was too clever for my own good with that “shadow” table. It becomes a real problem with the window is resized (which includes during printing!). I’ve got a new direction to try. I’ll follow up once I’ve had a chance to work with it. The plans are to use an absolutely positioned DIV with a solid color and mostly transparent floating over the top of the column of interest. With a stylesheet specialized for printing I can completely hide the DIV if it becomes a problem.

potential differences [/dhtml] permalink

DHTML Fun

As I mentioned earlier I’m using this site and two others as an excuse to update my web authoring skills. At work I was also asked to do what initially seemed to be a simple task, but ended up not so simple. There’s a table of data with alternating row background colors to help legibility. Based upon what a user selects from a select list on the page we want to highlight a particular column of the table by changing its background color.

So, I quickly learned about the new col tag table child, as well as the document.getElementById javascript method. However, a straightforward col.style.backgroundColor = x call didn’t work. After some research I discovered that row backgrounds are drawn on top of column backgrounds. It was time I enter hack mode.

I ended up dynamically creating a “shadow” table absolutely z-positioned behind the primary one, matching it’s position, size, and number of rows. The shadow table’s rows had background colors. The primary table’s background colors were all transparent, so that when I set a column’s background color, it was visible. Problem solved.

I think a lot of developers look down upon doing javascript and html work (and GUI work in general) and that’s really a shame. Elegant code and ingenious solutions can be found in the user interface arena.

potential differences [/dhtml] permalink