zelph.com

Steve over at Slayeroffice just posted an update to one of his “favelets” that I sent to him. So I thought I’d do a quick write-up on how it came to be (as I’m really lacking in content these days).

We are big fans of his Favelet Suite over at Sprint, and use it daily. One of the favelets is the Mouseover DOM Inspector (MODI) that we used more then the rest to get a nice quick look at how our CSS based pages are laying out by using the background color that MODI provides.

A favelet (or Bookmarklet as we usually call them here… same thing) that I had always wanted to make was one that showed the parent structure of the element you moused over. When I finally got some time, I thought that tweaking Steve’s MODI favelet would be a natural fit. So I snagged the parent structure parsing code from our Sprint IFR implementation and slapped it into a copy of MODI. After a little tweaking to actually spit out the parent structure, instead of just walk up it, it was working pretty good. Added the Height/Width while I was at it and called it good.

A few weeks later I was working on another project and was regularly trying to find the X,Y of a given element (X,Y finding thanks to PPK over at quirksmode.org). Eventually the lightbulb went off and I just added it to the MODI script that was fast becoming the one stop shop for everything we needed.

After using that for a while I finally decided to offer it up to Steve to add to his own script, so that others could use the new features as well. The update that I sent him was added today and now I can go back to just needing his Suite, and can remove a bookmark from my toolbar.

Many thanks to Steve for the great resource that he provides in the Favelet Suite (and naturally each individual Favelet). I know it has saved us a lot of time in various circumstances, and it’s an honor to be able to contribute to it.

Comments(1)