Archive for the tag 'DHTML'

Magical, incompatible Firefox display style value for table rows

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.

Javascript frameworks: Prototype vs. Mochikit

OK, I want to build some ajaxy features into my site. I don’t want to deal with a ton of cross-platform stuff (been there, did that poorly), and I want to write unobtrusive javascript. Two libraries look good to make my life easier, Prototype and Mochikit… but which to choose? Anyone have advice? I’m not using Ruby on Rails, which seems to have some integration with Prototype, but it seems to have some nice features. However, the screencast for Mochikit (more Python-y) looked very promising as well. Bah. Off to do a lot of research, I guess…

Playing around with DHTML

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.

Double-fisted blogging

I’m trying to figure out where to post entries when I do happen to do so, which is a pretty rare event anyhow. Here, or at 360°? WordPress pretty much kicks 360’s ass at the moment when it comes to editing tools, so I suppose I’ll keep posting the majority here. But, 360 is all Yahoorific, and more at my fingertips while working. I guess I shouldn’t blog from work much anyhow :-)

Well, in the meantime, just a few interesting links… Mac serial number decoder–find out when your Mac was made.
As a guy at work would say, this is totally ringing the bell on the nerdometer. Some guy made Mac OS X Engineer Trading Cards. Yeah… but I have to admit his Ajax-style commenting system rocks. Pretty sweet effect, if a tad useless. Well, I like the submit-without-refresh bit, but the live preview bit is not too useful IMO.
One more: dissecting WordPress themes, seems handy.