jQuery sash (splitter) plugin

Task: you want to split your web-page into resizable panels. Users may drag splitters between panels left and right, up and down – adjusting the whole view to their liking. Also it should be easy to hide/show individual panels, together with their splitters.

Problem: how to do it with as less code as possible, so that you write:

$("#parentDiv").sash({ content1: "div1", content2: "div2" });

and the rest is done automatically?

Solution: use jQuery Sash Plugin.

See here: jQuery Sash Plugin online example
and there: jQuery Sash Plugin source code and documentation

JQuery (Photo credit: Wikipedia)

“focusable” behavior

Task: Suppose, you want to create web-page with few areas. Each area has multiple inputs. When focus “belongs” to a particular area, it is indicated with some CSS and area captures keyboard navigation.

Problem: how to manage focus transfer within the area (that means, between inputs of the area) and between areas – with as less code as possible?