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.
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.
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.
It’s likely to only work on Firefox and Safari, but check it out and drag the boxes around:
http://www.decafbad.com/2005/06/map-test/
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.
8 Comments
Nice.. small problem though. When I drag, say the green box, further up outside the scope of the box, the ‘textarea’ seems to expand, but in the wrong direction, towards the bottom. So, I still can’t see the green box even if I use the slide bar.
http://youngpup.net/2001/domdrag
That’s pretty damn cool.
This would make an interesting interface in combination with TiddlyWiki, an all in one file wiki, where the tiddlers (boxes with microcontent) have reference with each other.
http://www.tiddlywiki.com/
Great. Works also in Omniweb 5.1.1 beta 2
Note: Use this to easily create usable and dynamic trails [1].
[1] http://www.scottmccloud.com/comics/icst/icst-4/icst-4.html
Very cool. Works in Camino 0.8.4, BTW.
There is a Tiddlywiki with dragand drop of tiddlers.
It is the version done with ruby-on-rails and there is a free hosting site if you want to try it.
See http://www.serversidewiki.com/