lifebsideben

I was writing some javascript to show/hide table rows based on user input (filtering to match search terms), and saw some really weird behavior. Now, of course, the first problem is that I was writing JS code, which I pretty well suck at. But, this seemed simple enough.

Whenever I’d hide a row, and then make it visible again, the header row would get confused, and all of the unhidden rows’ columns would be squeezed under the first header column. Weird, since the DOM hadn’t changed, and they had equal numbers of columns, etc., as always. After a bunch of head scratching a searching, I finally found this short article which talks about exactly this issue, and apparently it’s specifically a Firefox oddity.

The net/net is that Firefox has another CSS ‘display’ value besides just hidden/inline/block… they have a very special one called “table-row” which makes this work properly. Whodathunkit. But, it works great now, using the try/catch strategy outlined in the link above.

Tags: coding, debugging, DHTML, javascript, work

Hmm, when you start working with a bunch of webservices that spit out JSON (really, it’s inevitable; leave XML for interfacing with the Big Iron, especially since almost noone seems to understand when to use attributes, and so most docs are 95% elements), you’re going to want a nice way to look at the output for visual debugging. That’s one thing the current crop of browsers finally got right, is being able to pretty-print XML, even without a default stylesheet. For example, here’s what I get in Firefox for part of a sample document (cropped, the doc is valid!): Read more »

Tags: coding, Firefox, javascript, JSON, plugins, software

It’s been a while since I hacked up any DHTML (checking the cvs logs, a year or so since I implemented the ‘orgPop’ feature with xmlhttprequest.) Every once in a while I get the hankerin’ to mess about with client-side stuff, and the past week seems to have be the latest spurt of activity. First it was a Greasemonkey script to more-easily expose info that the work apaches are configured to inject into served pages, now it’s tinkering with prototypes of small bits of functionality for an app my team’s working on. I think I also got a bit inspired by the rollover-news-summary feature on the new Beta of news.yahoo.com, which was a nifty bit of last-minute (as in I think it was 30 mins before the beta went live) engineering by that team (nice!)

So far I’ve hacked up (with little snippets of js code from around the ‘net),

• a dynamic html table that you can add rows to based on selections in a select box (i.e., pick a new user->adds a row for that user, with columns for their attributes)
• a pair of html lists (<ul>s) in which you can click on the items, moving them between the two lists
• a textarea paired with an input box, where text entered in the input box can be autocompleted by any word in the textarea (it’s pretty slick, very gmail-email-address-autocomplete-like)

I’m pretty happy with the results, especially because I haven’t really done anything special to test for IE/Moz, and everything seems to basically work on both. I don’t know if any of these will actually make it into our project, but I hope so. The list-thingy (the second one above), however, isn’t that stellar from a user-interface point of view. I think I’ll end up arguing for paired select boxes with similar behaviors, like Matt Kruse’s Options Transfer example.

One link… since almost all my programming books/references are in storage 2000 miles away, this excerpt from JavaScript: The Definitive Guide (4th ed.) has been awfully useful. I have the 2nd edition in storage, might be time to pick up the newer one.

Tags: DHTML, javascript