DHTML Floating Resizable Content Panes

I’ve continued to look for a reusable DHTML floating content pane. During my searching I dug into script.aculo.us, revisited dojo and came across something new. Here’s the quick lowdown on what I found.

For those who aren’t in the know, script.aculo.us is an open source javascript library written by Thomas Fuchs that is built on top of Prototype. script.aculo.us makes it easy to add visual effects and other goodies to your web applications. Those combined with ActionView’s AJAX helpers help give Ruby on Rails its claim to AJAX fame. After coming up short last week I figured I would spend some time seeing what scriptaculous can do. The library makes it easy to create draggable items (like say a div element), so I figured it wouldn’t be a stretch to extend things to create a floating resizable content pane. What I found is that there’s nothing built in for resizing elements. It seems that it’s something that’s still on the wish list. After digging into the code a little bit I found that it would require writing a whole new version of the scriptaculous Draggable class along with a new effects method for resizing.

Not wanting go to that effort right away, I decided to have another look at dojo. This time I was able to get the floating content pane widget running in my environment, but I found that it’s still a bit underdeveloped. I suppose that’s to be expected since as of right now it’s still only available in the nightly build. You can find a running demo of it here.

At this point I launched one last search effort to uncover something usable. What I found was Mike Foster’s X Library. It’s open source and has what seems to be a fully useable implementation of a floating resizable content pane. There’s an online demo here. I played around with it a little bit and got everything loaded up in a Rails application. The windows are defined with a combination of html div tags and javascript so I was able to insert content through standard rhtml (something I don’t think I would have been able to do if they were defined purely through script).

My problem moving forward is that I seem to be amassing a large number of libraries. Including all of these in my application will result in a large footprint. I may have to make an attempt to write this by extending scriptaculous.

Those links could use some

Those links could use some editing. They all have a codesnipers.com prefix - which really doesn't resolve very well.



Walter Zorn

Walter Zorn has a well-developed drag and drop library: http://www.walterzorn.com/dragdrop/

What's topical to this post is his draggable/scrollable window example. It's more or less a prototype, and does not have built-in library support (which is unfortunate), but it's still fairly nice and worth having a look at if nothing else. I was toying around with it for possible use in my app, but have not yet decided.


Brian Moeskau
MyHomePoint.com - Powering the Modern Family