As I got more comfortable with javascript and its capabilities to manipulate the DOM, I decided to play with my favorite pastime – user interfaces. Specifically, I wanted to build a library of objects I could use in web-based applications at work. One can call it an early, one-man jQuery UI competitor – except that jQuery UI was first released in September 2007…

The demo is pretty much self-explanatory. I defined the following objects:

An expanding object (the two green boxes in the demo), consisting of a header (the clickable area that triggers the expansion/contraction) and the actual object being expanded/contracted. The object can expand to a given maximum height, can expand with transparency over the existing elements or can expand around them, and can trigger on click or hover.
A slider set (the light green squares inside the grid). Each slider can be dragged and can either spring back to its original location, or stay where dragged. The sliding is reflected in real time in other elements (in this case, the table to the right of the grid)
A draggable object (the two light red boxes), which can be dragged into a container (the two dark red boxes)

When jQuery came out, and then jQuery UI, I fell in love with the way it extended javascript’s syntax in such a natural way and made web and specifically UI programming so much more legible. This experiment gave me a good deal of empathy for what’s going on “behind the scenes” in any framework that sits on top of javascript and the DOM.

js objects.png — js-objects

Click through for the live site.

The source code for javascript objects is hosted on github here.