Things I Learned This Week

It's been a busy week, working on a fancy/complicated Web project. Here's a smattering of things I've learned:

IE7 breaks old assumptions about float clearing

I have been using a variant of ALA's Practical CSS Forms for years. It blew up in IE7; all the pieces rushed in on themselves. I've since switched to a variant of Nick Rigby's Prettier Accessible Forms (I ditched the JavaScript, but I find using list elements more semantic than what I was using before, so this is an overall "win"), with new IE7-compatible clearing that's been popping up lately.

You can't (easily) style legend in Mozilla/Firefox

The main problem I was having with the new forms was trying to move the legend around. Worked fine in IE, but was seriously wonky in Firefox. Turns out, this is a known bug in Mozilla/Firefox. I couldn't find a satisfying way to combat the defaults, so I gave ultimately up pixel-perfection here, but it's weird having something that IE handles better than Mozilla does.

You can run old IE and new IE on one machine

I downloaded IE7 pretty early in the "beta" process, then backed out and removed it. Last week, when it "officially" launched, I dove back in. But IE6 is still the gold standard, faster or not, IE6 will be here for some time to come (IE7 is currently XP- and Vista-only).

While BrowserCam is indispensible (especially the VNC-powered "remote access" feature), there's still no replacement for a locally available copy of the world's monopolist dominant browser. Thanks to archives available at Evolt, it is possible to run stand-alone copies of IE6 (or 5.5, or earlier) side-by-side with the new IE7.

Unfortunately, I've encountered one or two odd problems with the IE6 available there. It's an old archive, and it appears to deploy a patch/workaround for the Eolas patent issues. So, that's one: Flash or other "Active" content will work… oddly. It also appears to disable cookies, and have extremely limited support for PNGs (at least, my standard array of PNG "fixes" for pre-7 IE stopped working.)

Scriptaculous' Sortables are tricky

So, I've grown mighty attached to the one-two punch of Scriptaculous and Prototype, but the documentation is still frustratingly lacking (with at least one notable exception) . The Sortables demo , for example, doesn't really handle multiple groups, and the demo at Greg Neustaetter's site, while better, doesn't actually work.

I'll try to put a demo together myself, but here's what I've learned, anyway:

  • Names matter: You need to set ids on your group and list-items that match. So, group_1 with members group_1_item1, group_1_item2 and so forth. Note: You can override the pattern by setting the format option on Sortable.create, but format isn't actually documented… anywhere (yet).
  • Dynamic group adder: Greg (smartly) uses a function called createLineItemSortables to create the Sortables, rather than in-line script. This allows him to call this createLineItemSortables when he adds another group to the DOM. The alternative, is pulling in an updated page via Ajax. In my case, I found that Greg's method successfully animated the sortable elements, but messed up on update. That is: It fired an XHR request, but consistently serialized the wrong element. My solution? Instead of Sortable.serialize(this), pass the container id into the update function and use that explicitly.
  • When moving from one group to another, two update requests will fire (once for each group)… except. When removing the last item from a group, that group's update won't include any parameters; they'll just be blank_. If you're depending on the group_id coming in this way, it won't work; you'll get an empty post. Instead, attach the group_id to the URL in the update request, like @'/server_sidesort?group='+container.id@

Permalink • Posted in: javascript, tech stuff, web