Question : resize in css
Answered by : salo-hopeless
/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;
/* Global values */
resize: inherit;
resize: initial;
resize: unset; Source : | Last Update : Sat, 13 Jun 20
Question : how to make a div resizable
Answered by : you
<!DOCTYPE html>
<html>
<head> <style> /* CSS to style the resizable div */ .resizable { width: 200px; height: 200px; resize: both; overflow: auto; border: 1px solid #ccc; padding: 10px; } </style>
</head>
<body> <div class="resizable" id="myDiv"> Resize this div </div> <script> // JavaScript to implement resizing functionality const resizableDiv = document.getElementById('myDiv'); resizableDiv.addEventListener('mousedown', initResize, false); function initResize(e) { window.addEventListener('mousemove', resizeDiv, false); window.addEventListener('mouseup', stopResize, false); let prevX = e.clientX; let prevY = e.clientY; function resizeDiv(e) { const width = resizableDiv.offsetWidth + (e.clientX - prevX); const height = resizableDiv.offsetHeight + (e.clientY - prevY); resizableDiv.style.width = width + 'px'; resizableDiv.style.height = height + 'px'; prevX = e.clientX; prevY = e.clientY; } function stopResize() { window.removeEventListener('mousemove', resizeDiv, false); } } </script>
</body>
</html>Source : | Last Update : Tue, 19 Sep 23