slayeroffice - web experiments gone horribly awry

Looking for the drawings? They're over here, and my drawing blog is this way.

Document Tree Chart Favelet

  • Current Version: 1.2
  • Last Revision: 05.14.04
  • Language: Javascript
  • Requires: Mozilla, Firefox, Opera 7.5

This favelet will create a hierarchal chart of the document tree, overlaid on the current document. Hit the [esc] key to kill it.

Right click the following link and select "Bookmark this Link".

Document Tree Chart

Update: Version 1.2

  • Color Coding: Each element label now has a semi-unique background color. This was accomplished by taking the character code value of the first three characters of the tag name and subtracting that value from 295 and applying the result as the individual red, green and blue components of the color. If the tag name is less than three characters long, the values are set to that of the red component. Thanks go to Andrew Wooldridge for the suggestion.
  • Branch Removal: Clicking on the text of any label will now remove that label and all of its child labels from the chart. Useful if you aren't interested in how many meta or link elements someone has in the head of their document.
  • Element Highlighting: This was intended to be a part of the original release but I didn't get around to it. Borrowing directly from the Mouseover DOM Inspector, hovering over any element label (except the HTML label as that seemed pointless) will turn the background color of the element it represents to gray. This is OFF by default, and can be toggled with the "B" key just like in the MODI.
  • Opacity: The chart's container element is now set to an opacity of 0.9 to allow you to see any elements that are being highlighted that happen to be obscured by the chart. This is, of course, a Mozilla/Firefox feature only as Opera 7.5 doesn't support it.

Update: Version 1.1 - You can now toggle between the default horizontal view to a vertical tree view by hitting the "T" key.