Answers for "js make div resizable"

html resizable div

div {
   resize: both;
   overflow: auto;
}

javascript make element resizable

<div id="myResizableElement"></div>
<style>
#myResizableElement{
	background:#ddd;
	height:100px;
	width:100px;
}
.grepper_resizer{                                                                     
    height:20px;                                                                      
    width:20px;
    piostion:absolute;                                                                
    bottom:0px;                                                                       
    right:0px;
    z-index:999999999999999;                                                          
    cursor:se-resize;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bpUUqCnYQdchQHcSCqIijVqEIFUKt0KqDyaVf0KQhSXFxFFwLDn4sVh1cnHV1cBUEwQ8QNzcnRRcp8X9JoUWMB8f9eHfvcfcO8NfLTDU7xgFVs4xUIi5ksqtC8BUhBNCLUQxKzNTnRDEJz/F1Dx9f72I8y/vcn6NbyZkM8AnEs0w3LOIN4ulNS+e8TxxhRUkhPiceM+iCxI9cl11+41xw2M8zI0Y6NU8cIRYKbSy3MSsaKvEUcVRRNcr3Z1xWOG9xVstV1rwnf2E4p60sc53mEBJYxBJECJBRRQllWIjRqpFiIkX7cQ//gOMXySWTqwRGjgVUoEJy/OB/8LtbMz854SaF40Dni21/DAPBXaBRs+3vY9tunACBZ+BKa/krdWDmk/RaS4seAT3bwMV1S5P3gMsdoP9JlwzJkQI0/fk88H5G35QF+m6BrjW3t+Y+Th+ANHWVvAEODoGRAmWve7w71N7bv2ea/f0AXGxynrd/jxUAAAAGYktHRAD/AP8A/6C9p5MAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAHdElNRQflCAMRHTv7G4jBAAAALklEQVQ4y2NgGOyAkQK9/7GZw0RtFzIxjAJ6xPJ/HOpHY3koxvJ/aoiPxvIgBAAuXAYQLWgnvQAAAABJRU5ErkJggg==') !important;

</style>
<script>
function setUpResizeable(el){
    var resizer = document.createElement('div');
    resizer.className = 'grepper_resizer';
    el.appendChild(resizer);
    resizer.addEventListener('mousedown', initDrag, false);

    var startX, startY, startWidth, startHeight;

    function initDrag(e) {
        //dont drag on right click
       if(e.which == 3){
            return;
       }
       startX = e.clientX;
       startY = e.clientY;
       startWidth = parseInt(document.defaultView.getComputedStyle(el).width, 10);
       startHeight = parseInt(document.defaultView.getComputedStyle(el).height, 10);
       document.documentElement.addEventListener('mousemove', doDrag, false);
       document.documentElement.addEventListener('mouseup', stopDrag, false);
    }

    function doDrag(e) {
       el.style.width = (startWidth + e.clientX - startX) + 'px';
       el.style.maxWidth = (startWidth + e.clientX - startX) + 'px';
       el.style.height = (startHeight + e.clientY - startY) + 'px';
    }

    function stopDrag(e) {
        document.documentElement.removeEventListener('mousemove', doDrag, false);
        document.documentElement.removeEventListener('mouseup', stopDrag, false);
    }
}

setUpResizeable(document.getElementById("myResizableElement"));
 </script>