Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Javascript Resizable Container
var responsive = document.querySelector('.responsive');
var resize = document.querySelector('.resize');
var content = document.querySelector('.content');
var mousedown = false;
var locX = 0;
var locY = 0;
var side = "";
resize.addEventListener('mousedown', function(event){
mousedown = true;
getSide(event);
});
window.addEventListener('mouseup', function(event){
mousedown = false;
reset();
})
window.addEventListener('mousemove', function(event){
if(!mousedown) return;
event.preventDefault();
if(locX == 0){
locX = event.clientX;
locY = event.clientY;
}
var diffX = event.clientX - locX;
var diffY = event.clientY - locY;
locX = event.clientX;
locY = event.clientY;
var oldWidth = Number(responsive.style.width.split('p')[0]) || 600;
var oldHeight = Number(responsive.style.height.split('p')[0]) || 300;
switch(side){
case 'right':
diffY = 0;
break;
case 'left':
diffY = 0; diffX = -diffX;
break;
case 'top':
diffX = 0; diffY = 0;
break;
case 'bottom':
diffX = 0;
break;
}
responsive.style.width = (oldWidth + diffX*2) + 'px';
responsive.style.height = (oldHeight + diffY) + 'px';
});
var reset = function(){
locX = 0;
locY = 0;
}
var getSide = function(event){
var padding = (resize.offsetWidth - content.offsetWidth)/2;
var mx = event.clientX;
var my = event.clientY + window.scrollY;
//Get Side Locations
var outRight = responsive.offsetWidth + responsive.offsetLeft;
var inRight = outRight - padding;
var outLeft = responsive.offsetLeft;
var inLeft = outLeft + padding;
var outTop = responsive.offsetTop + window.scrollY;
var inTop = outTop + padding;
var outBottom = responsive.offsetTop + responsive.offsetHeight;
var inBottom = outBottom - padding;
console.log(outBottom, my);
side = "right";
if(mx > outLeft && mx < inLeft)
side = "left";
if(my > outTop && my < inTop)
side = "top";
if(my < outBottom && my > inBottom)
side = "bottom";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment