Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set whether or not an element is resizable by the user with JavaScript?
In this tutorial, we will learn to set whether or not an element is resizable by the user with JavaScript. The CSS resize property controls if users can drag element corners to change its size.
Web elements are typically fixed in position and size. However, sometimes you need to allow users to resize elements dynamically. The CSS resize property provides this functionality, and JavaScript's DOM manipulation allows us to control this behavior programmatically.
Using the Style resize Property
The resize property determines whether an element can be resized by the user. Common examples include textarea elements, which are resizable by default.
Syntax
var element = document.getElementById("elementId");
element.style.resize = "none || both || horizontal || vertical || initial || inherit";
Parameters
- none ? Default value. The element is not resizable.
- both ? The element is resizable both horizontally and vertically.
- horizontal ? The element is resizable only horizontally.
- vertical ? The element is resizable only vertically.
- initial ? Sets to the default value.
- inherit ? Inherits the property from its parent element.
Example 1: Making an Element Resizable
This example shows how to make a div element resizable when a button is clicked:
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 350px;
height: 200px;
overflow: auto;
background-color: orange;
border: 3px solid red;
padding: 10px;
}
</style>
</head>
<body>
<p>Click the button to make the box resizable.</p>
<button type="button" onclick="makeResizable()">Make Resizable</button>
<br><br>
<div id="box">
<p>This is a resizable div. After clicking the button, you can drag the corners to resize it.</p>
<p>Try dragging from the bottom-right corner!</p>
</div>
<script>
function makeResizable() {
document.getElementById("box").style.resize = "both";
}
</script>
</body>
</html>
Example 2: Toggle Resize Functionality
This example demonstrates how to toggle between resizable and non-resizable states by clicking on the element itself:
<html>
<head>
<style>
#container {
overflow: auto;
border: 1px dashed blue;
width: 350px;
height: 150px;
background-color: lightgray;
padding: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<h3>Click within the box to toggle resize functionality</h3>
<div onclick="toggleResize()" id="container">
Click me to toggle resize! Current state will switch between resizable and non-resizable.
</div>
<script>
function toggleResize() {
var div = document.getElementById("container");
if (div.style.resize == "" || div.style.resize == "none") {
div.style.resize = "both";
div.innerHTML = "Now resizable! Drag corners to resize. Click again to disable.";
} else {
div.style.resize = "none";
div.innerHTML = "Not resizable. Click to make it resizable again.";
}
}
</script>
</body>
</html>
Example 3: Dynamic Resize Control with Dropdown
This example uses a dropdown menu to select different resize options:
<html>
<head>
<style>
#resizableDiv {
border: 2px solid green;
background-color: lightblue;
padding: 20px;
margin: 20px 0;
}
</style>
</head>
<body>
<h2>Dynamic Resize Control</h2>
<div>
<label>Select resize option:</label>
<select id="resizeSelect">
<option value="none">None</option>
<option value="both">Both</option>
<option value="horizontal">Horizontal</option>
<option value="vertical">Vertical</option>
</select>
<button id="applyBtn">Apply</button>
</div>
<div id="resizableDiv">
This div will change its resize behavior based on your selection above.
Try different options and drag the corners!
</div>
<script>
document.getElementById("applyBtn").addEventListener("click", applyResize);
var targetDiv = document.getElementById("resizableDiv");
targetDiv.style.overflow = "auto";
targetDiv.style.width = "400px";
targetDiv.style.height = "150px";
function applyResize() {
var selectValue = document.getElementById("resizeSelect");
var selectedOption = selectValue.value;
targetDiv.style.resize = selectedOption;
}
</script>
</body>
</html>
Key Points
- The element must have
overflow: autooroverflow: scrollfor the resize property to work - The resize handle appears in the bottom-right corner of the element
- Resizable elements work best with block-level elements like divs
- The resize property is widely supported in modern browsers
Conclusion
The JavaScript resize property provides flexible control over element resizing behavior. By combining it with event handlers and user interactions, you can create dynamic, user-friendly interfaces that adapt to user preferences.
537 Views
