Resizable flexible box

Developer
Anthony Pothin
Size
3,381 Kb
Views
4,048
  1. Resizable flexible box Previews
  2. Resizable flexible box HTML Codes
  3. Resizable flexible box CSS Codes
  4. Resizable flexible box JS Codes

How do I make an resizable flexible box?

Drag and drop middle bars to change aspect ratios. What is a resizable flexible box? How do you make a resizable flexible box? This script and codes were developed by Anthony Pothin on 17 January 2023, Tuesday.

Resizable flexible box Previews
IQ Test

Resizable flexible box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Resizable flexible box</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container horizontal"> <div class="container vertical"> <div id="box_1" class="box">BOX 1</div> <div name="resizerV1"></div> <div id="box_2" class="box">BOX 2</div> <div name="resizerV2"></div> <div id="box_5" class="box">BOX 3</div> </div> <div name="resizerH1"></div> <div id="box_3" class="box" style="display:flex;flex-direction:column">BOX 4<br/><p style="white-space:normal;text-align:center;font-size:0.5em;">drag and drop vertical and horizontal bars to change the flex ratio of boxes</p></div> <div name="resizerH2"></div> <div id="box_4" class="box">BOX 5</div>
</div>
<script>	window.onload = function() { new Resizer(document.querySelector('[name=resizerH1]'), 'H'); new Resizer(document.querySelector('[name=resizerH2]'), 'H'); new Resizer(document.querySelector('[name=resizerV1]'), 'V'); new Resizer(document.querySelector('[name=resizerV2]'), 'V'); };
</script> <script src="js/index.js"></script>
</body>
</html>

Resizable flexible box - Script Codes CSS Codes

html, body { width: 100%; height: 100%; font-family: sans-serif; font-size: 1.5em; color: #FFF;
}
body { display: flex; flex-direction: row; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; -o-user-select: none; user-select: none;
}
.container { display: flex; flex: 1 1 auto;
}
.horizontal { flex-direction: row;
}
.vertical { flex-direction: column;
}
.box { flex: 1 1 0px; background: linear-gradient(45deg, #1D1F20, #2F3031) repeat scroll 0% 0% transparent !important; display: flex; justify-content: center; align-items: center; overflow-x: hidden; overflow-y: auto; white-space: nowrap;
}
.resizer { flex: 0 0 auto;
}
.resizer[data-resizer-type=H] { width: 10px; background: linear-gradient(to right, #505050, #383838) repeat scroll 0% 0% transparent; cursor: col-resize; box-shadow: 1px 0px 0px #6E6E6E inset, 2px 0px 2px rgba(0, 0, 0, 0.4);
}
.resizer[data-resizer-type=V] { height: 10px; background: linear-gradient(to bottom, #505050, #383838) repeat scroll 0% 0% transparent; cursor: row-resize; box-shadow: 0px 1px 0px #6E6E6E inset, 0px 2px 2px rgba(0, 0, 0, 0.4);
}

Resizable flexible box - Script Codes JS Codes

if (typeof Resizer === 'undefined') {	var Resizer = function(resizerNode, type, options) {	resizerNode.classList.add('resizer');	resizerNode.setAttribute('data-resizer-type', type);	this.hidebar = (typeof options === 'undefined' ? null : options.hidebar);	this.callbackMove = (typeof options === 'undefined' ? null : options.callbackMove);	this.callbackStop = (typeof options === 'undefined' ? null : options.callbackStop);	this.processing = false;	this.container = {	node: resizerNode.parentNode,	playingSize: null,	playingRatio: null	};	this.beforeBox = {	node: resizerNode.previousElementSibling,	ratio: null,	size: null	};	this.resizer = {	node: resizerNode,	type: type	};	this.afterBox = {	node: resizerNode.nextElementSibling,	ratio: null,	size: null	};	this.mousePosition = null;	this.beforeBox.node.style.flexGrow = 1;	this.afterBox.node.style.flexGrow = 1;	this.beforeBox.node.style.flexShrink = 1;	this.afterBox.node.style.flexShrink = 1;	this.beforeBox.node.style.flexBasis = 0;	this.afterBox.node.style.flexBasis = 0;	// ajout des events	this.resizer.node.addEventListener('mousedown', this.startProcess.bind(this), false);	};	Resizer.prototype = {	startProcess: function(event) {	// cas processus déjà actif	if (this.processing) {	return false;	}	// MAJ flag	this.processing = true;	// cacher la barre	if (this.hidebar) {	this.resizer.node.style.display = 'none';	}	// réinitialiser les variables	this.beforeBox.ratio = parseFloat(this.beforeBox.node.style.flexGrow);	this.afterBox.ratio = parseFloat(this.afterBox.node.style.flexGrow);	this.mousePosition = (this.resizer.type === 'H' ? event.clientX : event.clientY);	this.beforeBox.size = (this.resizer.type === 'H' ? this.beforeBox.node.offsetWidth : this.beforeBox.node.offsetHeight);	this.afterBox.size = (this.resizer.type === 'H' ? this.afterBox.node.offsetWidth : this.afterBox.node.offsetHeight);	this.container.playingSize = this.beforeBox.size + this.afterBox.size;	this.container.playingRatio = this.beforeBox.ratio + this.afterBox.ratio;	// lancer le processus	this.stopProcessFunctionBinded = this.stopProcess.bind(this);	document.addEventListener('mouseup', this.stopProcessFunctionBinded, false);	this.processFunctionBinded = this.process.bind(this);	document.addEventListener('mousemove', this.processFunctionBinded, false);	},	process: function(event) {	if (!this.processing) {	return false;	}	// calcul du mouvement de la souris	var mousePositionNew = (this.resizer.type === 'H' ? event.clientX : event.clientY);	var delta = mousePositionNew - this.mousePosition;	// calcul des nouveaux ratios	var ratio1, ratio2;	ratio1 = (this.beforeBox.size + delta) * this.container.playingRatio / this.container.playingSize;	if (ratio1 <= 0) {	ratio1 = 0;	ratio2 = this.container.playingRatio;	} else if (ratio1 >= this.container.playingRatio) {	ratio1 = this.container.playingRatio;	ratio2 = 0;	} else {	ratio2 = (this.afterBox.size - delta) * this.container.playingRatio / this.container.playingSize;	}	// mise à jour du css	this.beforeBox.node.style.flexGrow = ratio1;	this.afterBox.node.style.flexGrow = ratio2;	this.beforeBox.node.style.flexShrink = ratio2;	this.afterBox.node.style.flexShrink = ratio1;	// lancer la fonction de callback	if (typeof this.callbackMove === 'function') {	this.callbackMove();	}	},	stopProcess: function(event) {	// stopper le processus	document.removeEventListener('mousemove', this.processFunctionBinded, false);	this.processFunctionBinded = null;	document.removeEventListener('mouseup', this.stopProcessFunctionBinded, false);	this.stopProcessFunctionBinded = null;	// afficher la barre	if (this.hidebar) {	this.resizer.node.style.display = '';	}	// lancer la fonction de callback	if (typeof this.callbackStop === 'function') {	this.callbackStop();	}	// réinitialiser le flag	this.processing = false;	},	};
} else {	console.error('"Resizer" class already exists !');
}
Resizable flexible box - Script Codes
Resizable flexible box - Script Codes
Home Page Home
Developer Anthony Pothin
Username Thorien
Uploaded January 17, 2023
Rating 3
Size 3,381 Kb
Views 4,048
Do you need developer help for Resizable flexible box?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anthony Pothin (Thorien) Script Codes
Name
Form - form
Multipart data parsing
Custom scrollbar
Demo component
Tab bar
Test moment.js
Form - checkbox
Magic table
Flexible accordion
Custom list picker
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!