Download JavaScript Code Examples, Tutorials, Reference

xBar and the X library are licensed LGPL.

Visit JSBank

Application

var bars = new Array();

window.onload = function()
{
  if (xNN4 || xIE4 || !document.createElement) return;
  
  bars[0] = new xBar('ltr', 'hBarC', 'hBar');
  bars[1] = new xBar('ttb', 'vBarC', 'vBar');
  bars[2] = new xBar('rtl', 'hBarC', 'hBar');
  bars[3] = new xBar('btt', 'vBarC', 'vBar');

  winOnResize(); // initial setup
  
  xAddEventListener(document, 'mousemove', docOnMouseMove, false);
  xAddEventListener(window, 'resize', winOnResize, false);
}

function docOnMouseMove(evt)
{
  var e = new xEvent(evt);
  bars[0].update(e.pageX);
  bars[1].update(e.pageY);
  bars[2].update(e.pageX);
  bars[3].update(e.pageY);
}

function winOnResize()
{
  var l = 200, s = 20;
  var cw = xClientWidth();
  var ch = xClientHeight();
  var x = cw - l - s - 20;
  var y = xPageY('m1');

  bars[0].paint(x, y, l, s);
  bars[1].paint(x+l, y, s, l);
  bars[2].paint(x+s, y+l, l, s);
  bars[3].paint(x, y+s, s, l);

  bars[0].reset(xClientWidth(), 0);
  bars[1].reset(xClientHeight(), 0);
  bars[2].reset(xClientWidth(), 0);
  bars[3].reset(xClientHeight(), 0);

  xResizeTo('content1', l-s, l-s);
  xMoveTo('content1', x+s, y+s);
}

CSS

.hBarC { /* horizontal bar container */
  position:absolute;
  overflow:hidden;
  border:1px solid #333;
  background:#ccc;
}
.hBar { /* horizontal bar */
  position:absolute;
  overflow:hidden;
  background:#900;
}
.vBarC { /* vertical bar container */
  position:absolute;
  overflow:hidden;
  border:1px solid #333;
  background:#ccc;
}
.vBar { /* vertical bar */
  position:absolute;
  overflow:hidden;
  background:#009;
}
.marker {
  position:relative;
  visibility:hidden;
}
#content1 {
  position:absolute;
  overflow:hidden;
  padding:1em;
  color:#369; background:#fff;
}