{ "attachments": [], "comments_archived": true, "date": "2005-07-02T04:17:58.000Z", "layout": "post", "title": "Drag the boxes, stretch the lines", "wordpress_id": 664, "wordpress_slug": "drag-the-boxes-stretch-the-lines", "wordpress_url": "http://www.decafbad.com/blog/?p=664", "year": "2005", "month": "07", "day": "02", "isDir": false, "slug": "drag-the-boxes-stretch-the-lines", "type": "entry", "postName": "2005-07-02-drag-the-boxes-stretch-the-lines", "html": "

Update: A nice mention and ensuing discussion of this has appeared with this article at Lambda the Ultimate. I've killed trackback here due to spam, so I'm tossing this in manually.

\n

It's been awhile since I really sat down and tried knocking something out in the browser with JavaScript / DHTML. There was that Greasemonkey thing I did a little while ago, but that's not quite the same.

\n

So, I suddenly got an urge today to try making a mindmap-ish, boxes-and-lines chart out of some simple nested HTML lists using CSS and unobtrusive JavaScript. I didn't get all that far toward the original goal--but during the course of exploring script.aculo.us, Prototype, and Behaviour,js I came up with something that I think has potential.

\n

It's likely to only work on Firefox and Safari, but check it out and drag the boxes around:

\n

http://www.decafbad.com/2005/06/map-test/

\n

View the source, steal anything worth theft, make fun of what's bad. Oh yeah, and don't mind the ugly background images too much: They were just some random textures I picked out of The Gimp in order to see just how well the transparency on distorted PNGs worked.

\n

Archived Comments

\n\n\n\n
\n\n\n", "body": "Update: A nice mention and ensuing discussion of this has appeared with this article at Lambda the Ultimate. I've killed trackback here due to spam, so I'm tossing this in manually.\r\n\r\nIt's been awhile since I really sat down and tried knocking something out in the browser with JavaScript / DHTML. There was that [Greasemonkey thing][gm] I did a little while ago, but that's not quite the same.\r\n\r\nSo, I suddenly got an urge today to try making a mindmap-ish, boxes-and-lines chart out of some simple nested HTML lists using CSS and unobtrusive JavaScript. I didn't get all that far toward the original goal--but during the course of exploring [script.aculo.us][s], [Prototype][p], and [Behaviour,js][b] I came up with something that I think has potential.\r\n\r\nIt's likely to only work on Firefox and Safari, but check it out and drag the boxes around:\r\n\r\n[http://www.decafbad.com/2005/06/map-test/](http://www.decafbad.com/2005/06/map-test/)\r\n\r\nView the source, steal anything worth theft, make fun of what's bad. Oh yeah, and don't mind the ugly background images too much: They were just some random textures I picked out of The Gimp in order to see just how well the transparency on distorted PNGs worked.\r\n\r\n[gm]: http://www.decafbad.com/blog/2005/06/08/greasemonkey_magic\r\n[b]: http://ripcord.co.nz/behaviour/\r\n[p]: http://prototype.conio.net/\r\n[s]: http://script.aculo.us/\r\n\r\n
\r\n

Archived Comments

\r\n \r\n \r\n \r\n
\r\n ", "parentPath": "./content/posts/archives/2005", "path": "2005/07/02/drag-the-boxes-stretch-the-lines", "needsBuild": true, "prevPostPath": "2005/06/28/building-a-proper-shared-syndication-feed-foundation", "prevPostTitle": "Building a proper shared syndication feed foundation", "nextPostPath": "2005/07/02/css-treemaps", "nextPostTitle": "Treemaps from unordered lists and CSS" }