resize div

by levchenko_d

HTML

<div><h2>Resize me totally</h2></div>

CSS

div{
    position: relative;
    border: solid 1px #e2e2e2;
    display: inline-block;
    width: 120px;
    height: 120px;
    overflow: hidden;
}

h2{
    font-family: courier;
    text-transform: uppercase;
    font-weight: 100;
}

i{
    padding: 7px;
    position: absolute;
    bottom: 0;
    right: 0;
    background: #e2e2e2;
    cursor: nw-resize;
}

.__resizing{
    border-color: #34383e;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none; 
}

JavaScript

function Resize(item){
    
    var dragg = false
    ,    startY = 0
    ,    startX = 0
    ,    startH = item.offsetHeight
    ,    startW = item.offsetWidth
    
    ,    resizer = document.createElement('i');
    
    item.appendChild(resizer);    
    
    item.onmousedown = function(e){
        if(e.target === resizer){
            startY = e.pageY;
            startX = e.pageX;
            dragg = true;
            this.className = '__resizing'
        }
    }
    
    document.onmousemove = function(e){
        if(dragg){
            var curY = e.pageY;
            var curX = e.pageX;
            
            item.style.height = startH + (curY - startY) + 'px';
            item.style.width = startW + (curX - startX) + 'px';
        }
    }
    
    document.onmouseup = function(){
        var resizing = document.querySelector('.__resizing');
        
        dragg = false;
        startH = item.offsetHeight;
        startW = item.offsetWidth;
        resizing.className = resizing.className.replace('__resizing','');
    }
    
}

var a = new Resize(document.querySelector('div'));