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>