24Aug06: In response to Matte's interesting challenge I threw together this fun little toy. Enjoy! :-)
Melles Pane | xQuadPane 1 | xQuadPane 2 | xVDualPane | xHDualPane | xSplitter
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
/* xQuadPane CSS */
.clsQPGroup
{
position: relative;
overflow: hidden;
visibility: visible;
margin: 20px 0 0 20px;
padding: 0;
background: #0AA;
border: 1px solid #0AA;
}
.clsQPPane
{
position: absolute;
overflow: auto;
visibility: hidden;
margin: 0;
padding: 0;
background: #B7FFFF;
border: 1px solid #0AA;
}
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<!-- xQuadPane HTML --> <div id='xQP2' class='clsQPGroup'> <!-- begin group --> <div class='clsQPPane'> <!-- begin pane --> </div> <!-- end pane --> <div class='clsQPPane'> <!-- begin pane --> </div> <!-- end pane --> <div class='clsQPPane'> <!-- begin pane --> </div> <!-- end pane --> <div class='clsQPPane'> <!-- begin pane --> </div> <!-- end pane --> </div> <!-- end group -->
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
// Application
var qp1 = null;
var qp2 = null;
window.onload = function()
{
var cw = xClientWidth();
var w = .8 * cw;
var qp1 = xQuadPane(xGetElementById('xQP1'), w, 300, 'clsQPPane', 6);
var qp2 = xQuadPane(xGetElementById('xQP2'), w, 300, 'clsQPPane', 6);
xAddEventListener(window, 'resize', win_onresize, false);
}
function win_onresize()
{
var cw = xClientWidth();
var w = .8 * cw;
qp1.resize(w, 300, 6);
qp2.resize(w, 300, 6);
}
window.onunload = function()
{
xRemoveEventListener(window, 'resize', win_onresize, false);
}
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
// xQuadPane Object
function xQuadPane(oGrpEle, uGrpW, uGrpH, sPaneCls, uBarW)
{
// Private
function grp_onmousedown(oEvent)
{
var evt = new xEvent(oEvent);
if (evt.target == oGrpEle)
{
xPreventDefault(oEvent);
mx = evt.pageX;
my = evt.pageY;
xAddEventListener(document, 'mouseup', doc_onmouseup, false);
xAddEventListener(document, 'mousemove', doc_onmousemove, false);
dragging = 1;
}
}
function doc_onmouseup(oEvent)
{
if (dragging) {
xPreventDefault(oEvent);
mx = my = dragging = 0;
xRemoveEventListener(document, 'mouseup', doc_onmouseup, false);
xRemoveEventListener(document, 'mousemove', doc_onmousemove, false);
}
}
function doc_onmousemove(oEvent)
{
if (dragging) {
xPreventDefault(oEvent);
var evt = new xEvent(oEvent);
var dx = evt.pageX - mx;
mx = evt.pageX;
var dy = evt.pageY - my;
my = evt.pageY;
xResizeTo(panes[0], xWidth(panes[0]) + dx, xHeight(panes[0]) + dy);
xResizeTo(panes[1], xWidth(panes[1]) - dx, xHeight(panes[1]) + dy);
xLeft(panes[1], xLeft(panes[1]) + dx);
xResizeTo(panes[2], xWidth(panes[2]) + dx, xHeight(panes[2]) - dy);
xTop(panes[2], xTop(panes[2]) + dy);
xResizeTo(panes[3], xWidth(panes[3]) - dx, xHeight(panes[3]) - dy);
xMoveTo(panes[3], xLeft(panes[3]) + dx, xTop(panes[3]) + dy);
}
}
var i, pw, ph, panes = null;
var mx = 0, my = 0, dragging = 0;
// Public
this.resize = function(uW, uH, uBW)
{
xResizeTo(oGrpEle, uW, uH);
pw = (uW - uBW) / 2;
ph = (uH - uBW) / 2;
xMoveTo(panes[0], 0, 0);
xMoveTo(panes[1], pw + uBW, 0);
xMoveTo(panes[2], 0, ph + uBW);
xMoveTo(panes[3], pw + uBW, ph + uBW);
for (i = 0; i < 4; ++i)
{
xResizeTo(panes[i], pw, ph);
panes[i].style.visibility = 'visible';
}
}
// Constructor
if (!oGrpEle)
{
return null;
}
panes = xGetElementsByClassName(sPaneCls, oGrpEle, 'DIV');
if (!panes || panes.length != 4)
{
return null;
}
this.resize(uGrpW, uGrpH, uBarW);
oGrpEle.onmousedown = grp_onmousedown;
} // end xQuadPane