Melles Pane

Application

var mp = new Array();
window.onload = function()
{
  var pg, lp;
  var cw = xClientWidth();
  var w = .8 * cw;
  var x = (cw - w) / 2;
  for (var i = 1; i <= 2; ++i) {
    pg = xGetElementById('paneGroup'+i);
    lp = xGetElementById('leftPane'+i);
    xResizeTo(pg, w, xHeight(lp));
    xLeft(pg, x);
    mp[i-1] = new MellesPane(pg, lp, 'rightPane'+i, 10);
  }
  xAddEventListener(window, 'resize', win_onresize, false);
}
function win_onresize()
{
  for (var i = 0; i < mp.length; ++i) {
    mp[i].onresize();
  }
}
window.onunload = function()
{
  xRemoveEventListener(window, 'resize', win_onresize, false);
  for (var i = 0; i < mp.length; ++i) {
    mp[i].onunload();
  }
}

Intro

Drag the vertical bar to resize the pane widths. The original idea for this demo was by melles (thanks!). I liked it, played around with it a little, and this is what's left.

Cross-Browser.com

Object

function MellesPane(oParent, idLeftPane, idRightPane, dragBarWidth)
{
  // Private
  
  function pane_onmousedown(oEvent)
  {
    var evt = new xEvent(oEvent);
    var vbarRight = xPageX(lp) + xWidth(lp);
    if (evt.pageX >= vbarRight - dragBarWidth && evt.pageX >= vbarRight) {
      xPreventDefault(oEvent);
      mouseX = evt.pageX;
      xAddEventListener(document, 'mouseup', doc_onmouseup, false);
      xAddEventListener(document, 'mousemove', doc_onmousemove, false);
      dragging = 1;
    }
  }
  function doc_onmouseup(oEvent)
  {
    if (dragging) {
      xPreventDefault(oEvent);
      mouseX = dragging = 0;
      xRemoveEventListener(document, 'mouseup', doc_onmouseup, false);
      xRemoveEventListener(document, 'mousemove', doc_onmousemove, false);
    }
  }
  function doc_onmousemove(oEvent)
  {
    var evt = new xEvent(oEvent);
    if (dragging) {
      xPreventDefault(oEvent);
      var dx = evt.pageX - mouseX;
      mouseX = evt.pageX;
      xWidth(lp, xWidth(lp) + dx);
      xWidth(rp, (oParent==document ? xClientWidth() : xWidth(oParent)) - xWidth(lp));
      xMoveTo(rp, xWidth(lp), 0);
    }
  }
  
  // Public
  
  this.onresize = function()
  {
    if (!dragging) {
      xWidth(lp, oParent==document ? xClientWidth() / 2 : xWidth(oParent) / 2);
      xMoveTo(lp, 0, 0);
      xMoveTo(rp, xWidth(lp), 0);
      xWidth(rp, (oParent==document ? xClientWidth() : xWidth(oParent)) - xWidth(lp));
      xHeight(rp, xHeight(oParent));
    }
  }
  this.onunload = function()
  {
    lp.onmousedown = null;
    rp = lp = null;
  }

  // Constructor
  
  var mouseX = 0, dragging = 0;
  var rp = xGetElementById(idRightPane);
  var lp = xGetElementById(idLeftPane);
  lp.onmousedown = pane_onmousedown;
  this.onresize();

} // end MellesPane

HTML

<div id='paneGroup2'>
<div id='leftPane2' class='Pane'>
<h2>Demo</h2>
<p>Drag the vertical bar to resize the pane widths...</p>
<h2>Sed ut perspiciatis</h2>
<p>But I must explain to you how all this mistaken idea...</p>
</div>
<div id='rightPane2' class='Pane'>
<h2>At vero eos et</h2>
<p>On the other hand, we denounce with righteous...</p>
</div>
</div>

CSS

#paneGroup1 {
  position:relative;
  overflow:visible;
  height:300px;
  margin:0; padding:0;
  border-top:2px solid #0AA;
  border-bottom:2px solid #0AA;
}
#leftPane1 {
  position:relative;
  border-right: 10px solid #0AA;
  z-index:2;
  overflow:hidden;
  margin:0; padding:0;
}
#rightPane1 {
  position:absolute;
  z-index:1;
  overflow:auto;
  margin:0; padding:0;
}

#paneGroup2 {
  position:relative;
  overflow:visible;
  margin:20px 0 0 0; padding:0;
  border-top:2px solid #0AA;
  border-bottom:2px solid #0AA;
}
#leftPane2 {
  position:relative;
  border-right: 10px solid #0AA;
  z-index:2;
  overflow:hidden;
  margin:0; padding:0;
}
#rightPane2 {
  position:absolute;
  z-index:1;
  overflow:hidden;
  margin:0; padding:0;
}