javascript - Splitting HTML page into different sections using sliding panel dividers? How is it done? -

i'm wanting divide web page different sections shown here. i'm trying figure out technique called , efficient way implement it?

the page divided different sections giving user flexiblity expand , contract different sections using panel handles.

i'm assuming these aren't regular frames (which i'd avoid using anyways).

does know of tutorial or example out there besides 1 on jsfiddle?

the idea quite simple. break screen elements, not matter (say divs) given height.

then attach onclick event handle starts drag. onclick attach mousemove event body resize elements.

here wrote while (before jquery days), i'm sure written better, , might find plugin this, don't know of one:

function widenhandle(widenedelement, handleelement, ondblclick, startwidth, withcoverdiv, ondrop) {     this.handle = handleelement;     this.isclosed = false;     this.element = widenedelement;     this.lastx = 0;     this.lasty = 0;     this.attacheddragfunction = null;     this.attacheddropfunction = null;     this.startwidth = startwidth ? startwidth : 300;     this.coverdiv;     this.ondrop = ondrop;     this.isdragging = false;     if (withcoverdiv)     {         var coverdiv = document.createelement("div");         coverdiv.style.width = "2000px";         coverdiv.style.height = "2000px";         coverdiv.style.display = "none";         coverdiv.style.position = "fixed";         coverdiv.style.zindex = "1000"; //        coverdiv.style.backgroundcolor = "red"; //        coverdiv.style.opacity = "0.3";         coverdiv.style.top = '0px';         this.coverdiv = coverdiv;         document.body.appendchild(coverdiv);     }      if (this.handle.addeventlistener)     {         this.handle.addeventlistener("mousedown", function(element)         {             return function(event)             {                 element.startdragging(event);                 if (element.coverdiv)                     element.coverdiv.style.display = "";                 if (event.preventdefault)                     event.preventdefault();           }         } (this), true);          this.handle.addeventlistener("dblclick", function(element)         {             return function(event)             {                 element.close(event);                 if (element.coverdiv)                     element.coverdiv.style.display = "none";                 ondblclick(element);             }         } (this), true);     }     else     {         this.handle.attachevent("onmousedown", function(element)         {             return function(event)             {                 element.startdragging(event);                 if (element.coverdiv)                         element.coverdiv.style.display = "";                 if (event.preventdefault)                     event.preventdefault();             }         } (this));          this.handle.attachevent("ondblclick", function(element)         {             return function(event)             {                 element.close(event);                 if (element.coverdiv)                     element.coverdiv.style.display = "none";                 ondblclick(element);             }         } (this), true);     } }  widenhandle.prototype.startdragging = function(event) {     this.isdragging = true;     if (this.coverdiv)         this.coverdiv.style.display = "none";     this.clearattachedevents();      this.lastx = this.getx(event);     // ** attach mouse move , mouse events document ** //     this.attacheddragfunction = function(element)     {         return function(event)         {             element.ondragging(event);         }     } (this);      this.attacheddropfunction = function(element)     {         return function(event)         {             element.ondropping(event);         }     } (this);      if (window.attachevent) // ie     {         document.attachevent('onmousemove', this.attacheddragfunction);         document.attachevent('onmouseup', this.attacheddropfunction);     }     else // ff     {         document.onmousemove = this.attacheddragfunction;         document.onmouseup = this.attacheddropfunction;     } } // ** repositioning popup while dragging ** // widenhandle.prototype.ondragging = function(event) {     clearhtmlselection();     this.widencell(event); }  // ** release popup movement when dropping ** // widenhandle.prototype.ondropping = function(event) {     this.isdragging = false;     if (this.coverdiv)         this.coverdiv.style.display = "none";      this.clearattachedevents();      if (this.ondrop)         this.ondrop(); }  widenhandle.prototype.clearattachedevents = function() {     // ** detach events document ** //     if (window.attachevent) // ie     {         document.detachevent('onmousemove', this.attacheddragfunction);         document.detachevent('onmouseup', this.attacheddropfunction);     }     else // ff     {         document.onmousemove = null;         document.onmouseup = null;     } }  widenhandle.prototype.getx = function(event) {     // ** return x position of mouse ** //     var posx = 0;      if (!event) event = window.event;     if (event.pagex)     {         posx = event.pagex;     }     else if (event.clientx)     {         posx = event.clientx;     }      return posx; }  widenhandle.prototype.widencell = function(event) {     if (!this.element.style.width)         this.element.style.width = this.element.offsetwidth - 9 + "px";      var width = parseint(this.element.style.width) + (this.getx(event) - this.lastx);     if (width > 13)         this.element.style.width = width + "px";      // ** remember last mouse position ** //     this.lastx = this.getx(event); }  widenhandle.prototype.close = function(event) {     var width = parseint(this.element.style.width);     if (width < 30)     {         this.isclosed = false;         this.element.style.width = "";             return; //        width = this.startwidth;     }     else     {         width = 14;         this.isclosed = true;     }     this.element.style.width = width + "px"; }  function clearhtmlselection() {     var sel;     if (document.selection && document.selection.empty)     {         document.selection.empty();     }     else if (window.getselection)     {         sel = window.getselection();         if (sel && sel.removeallranges) sel.removeallranges();     } }