HTML


<div id="wrap">
  
  <div class="resize">
	<div class="drag">
	</div>
  </div>
  <div class="resize">
	<div class="drag">
	</div>
  </div>
    <div class="resize">
	<div class="drag">
	</div>
  </div>
  
</div>


CSS


html, body {
  height: 100%;
  margin: 0;
}
#wrap {
  width: 50vw;
  height: calc(100% - 35px);
}
.resize {
  position: relative;
  height: 33.333%;
  width: 100%;
  box-shadow: inset 10px 0 0 0 #ccc,
			  inset -10px 0 0 0 #ccc;
  display: block;    
}
.drag{
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 10px;
  width: 100%;
  background: lightblue;
}


JS


function c(a){console.log(a)}
function coords(el){
    var curleft, curtop;
    curleft=curtop=0;
    do{
        curleft+=el.offsetLeft;
        curtop+=el.offsetTop;
    } while(el=el.offsetParent);
    return [curleft,curtop];
}
Resizer = {
    attach: function(el,minh,minw){
        var rs=el.resizer=el.getElementsByClassName('drag')[0];
        rs.resizeParent=el;
        el.minh=minh||rs.offsetHeight;
        el.minw=minw||rs.offsetWidth;
        
        rs.onmousedown = Resizer.begin;        
        
    },
    begin: function(e){
        var el=Resizer.el=this.resizeParent;
        var e=e||window.event;
        this.lastx=e.clientX;
        this.lasty=e.clientY;
        document.onmousemove=Resizer.resize;
        document.onmouseup=Resizer.end;
        return false;       
        
    },
    resize: function(e){
        var e = e || window.event;
        var x,y,mx,my,el,rs,neww,newh;
        el=Resizer.el;
        rs=el.resizer;
        //mx=e.clientX;
        my=e.clientY;
        //neww=(el.clientWidth-(rs.lastx-mx));
        newh=(el.clientHeight-(rs.lasty-my));
        /*if(neww>=el.minw){     
            el.style.width=neww+'px';
            rs.lastx=mx;
        }
        else{
            rs.lastx-=parseInt(el.style.width)-el.minw;
            el.style.width=el.minw+'px';
            
        }*/
        if(newh>=el.minh){
            el.style.height=newh+'px';
            rs.lasty=my;
        }
        else{
            rs.lasty-=parseInt(el.style.height)-el.minh;
            el.style.height=el.minh+'px';            
        }
  
        return false;        
        
    },
    end: function(){
        document.onmouseup=null;
        document.onmousemove=null;
    }
};
window.onload=function(){
    Resizer.attach(document.getElementsByClassName('resize')[0],30,30);
    Resizer.attach(document.getElementsByClassName('resize')[1],30,30);
    Resizer.attach(document.getElementsByClassName('resize')[2],30,30);
}



CodePlay Playground as you play with the keyboard:

Console

The CodePlay Code Box Editors Playground is very simple to use, anyone can directly interact with a minimum of knowledge of HTML experience, live an idea or a project. We believe that only 5% of the developers has the full capacity and knowledge of each key on the keyboard. Therefore we decided to put together a single command from the Key [Esc] == 27.
For every need and every situation the keyboard [Esc] key fixes and puts in place the Original Initial Code Box Editors.
All this without losing the contents of each Box Editors .
!Enjoy your CodePlay.


CodePlay Playground is a project based on WordPress entirely revised to have a clean and dynamic HTML output.

Editor:

- [Esc] To reset the Box Editors and the closure of any open window overlay, including the Output (FULL) Preview.

New! - Double Click to Expand /Open & Close All Box Editors

New! - Ctrl + Up/Down to Show /Hide the Footer Bar. This allows hide footer bar when you want, + ESC to Back.

New! - Preview in Full page is now also possible via dblClick on the Vertical Drag-bar. Each keyboard action can be Reset via the ESC button.


Ex.
- Close this? [Esc], or a Click outside.


Front End User - New /Save Post is Now Open, Register *required.
New Play Now