Skip to content

Instantly share code, notes, and snippets.

@HarryStevens
Last active Oct 22, 2018
Embed
What would you like to do?
Resize
license: gpl-3.0

Resizing divs in Vanilla JavaScript.

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
width: 960px;
height: 500px;
outline: 1px solid gray;
}
#box-1 {
width: 300px;
height: 150px;
left: 300px;
top: 125px;
background: steelblue;
}
#box-2 {
width: 150px;
height: 300px;
left: 375px;
top: 100px;
background: tomato;
}
.box {
opacity: .8;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="box-1" class="box"></div>
<div id="box-2" class="box"></div>
<script src="resize.js"></script>
<script>
resize("#box-1");
resize("#box-2");
</script>
</body>
</html>
function resize(selector){
var element = document.querySelector(selector);
element.style.position = "absolute";
var d = 8; // distance from cursor to border to active resizing
var rect = element.getBoundingClientRect();
var rectLeft = rect.x || rect.left;
var rectWidth = rect.width;
var rectRight = rectLeft + rectWidth;
var rectTop = rect.y || rect.top;
var rectHeight = rect.height;
var rectBottom = rectTop + rectHeight;
var isLeft = false;
var isRight = false;
var isTop = false;
var isBottom = false;
var isResizable = _ => { isLeft || isRight || isTop || isBottom; };
var isResizing = false;
var resizeStarted = false;
var isMouseDown = false;
function cursorStyle(){
if (!isMouseDown){
element.style.cursor =
isTop && isLeft ? "nwse-resize" :
isTop && isRight ? "nesw-resize" :
isBottom && isRight ? "nwse-resize" :
isBottom && isLeft ? "nesw-resize" :
isLeft ? "ew-resize" :
isRight ? "ew-resize" :
isTop ? "ns-resize" :
isBottom ? "ns-resize" :
"default";
}
}
// just for testing
function cursorName(){
return isTop && isLeft ? "TopLeft" :
isTop && isRight ? "TopRight" :
Bottom && Right ? "BottomRight" :
Bottom && Left ? "BottomLeft" :
Left ? "Left" :
Right ? "Right" :
Top ? "Top" :
Bottom ? "Bottom" :
"nothing";
}
window.addEventListener("mousemove", _ => {
mouseX = event.clientX;
mouseY = event.clientY;
if (!isResizing){
isLeft = Math.abs(mouseX - rectLeft) < d;
isRight = Math.abs(mouseX - rectRight) < d;
isTop = Math.abs(mouseY - rectTop) < d;
isBottom = Math.abs(mouseY - rectBottom) < d;
}
cursorStyle();
isResizing = isMouseDown && isResizable;
if (isResizing){
if (!resizeStarted){
resizeStarted = true;
}
if (isRight){
resizeRight();
}
if (isLeft){
resizeLeft();
}
if (isTop){
resizeTop();
}
if (isBottom){
resizeBottom();
}
function resizeRight(){
rectRight = mouseX;
rectWidth = rectRight - rectLeft;
element.style.width = rectWidth + "px";
}
function resizeLeft(){
rectLeft = mouseX >= rectRight ? rectRight : mouseX;
rectWidth = rectRight - rectLeft;
element.style.left = rectLeft + "px";
element.style.width = rectWidth + "px";
}
function resizeTop(){
rectTop = mouseY >= rectBottom ? rectBottom : mouseY;
rectHeight = rectBottom - rectTop;
element.style.top = rectTop + "px";
element.style.height = rectHeight + "px";
}
function resizeBottom(){
rectBottom = mouseY;
rectHeight = rectBottom - rectTop;
element.style.height = rectHeight + "px";
}
}
});
element.onmousedown = _ => {
isMouseDown = true;
}
element.onmouseup = _ => {
isMouseDown = false;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment