xQuadPane 1

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

Instance 1

Lorem ipsum

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Instance 2

Lorem ipsum

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

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

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

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