Resize HTML DOM using jQuery

by Vincy. Last modified on July 12th, 2022.

In this tutorial, we are going to see about how to resize HTML DOM element using jQuery. We are using the jQuery resizable() function for changing the size of an HTML element dynamically.

In this example, we are going to call this jQuery function for our resizable DIV by using id selector. We can obtain several animation effects on resizing DOM elements by passing optional parameters to this function.

View Demo

HTML DIV Resize Example

This code contains a resizable DIV element. We are calling jQuery resizable() by referring the id of the DIV element.

jquery-resize

<html>
<head>
<title>Resize HTML DOM using jQuery</title>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
#resizable-div {
	width: 200px;
	height: 200px;
	background: #9CE684;
	text-align: center;
	padding: 20px;
}
</style>
<script>
  $(function() {
    $( "#resizable-div" ).resizable();
  });
  </script>
</head>
<body>
	<div id="resizable-div">Resizable DIV Element</div>
</body>
</html>

jQuery Resizable Function Options

jQuery resizable() function accepts optional parameters for some special purpose. For example, the following script contains options for creating animation effects and restricting boundary for resizing.

$(function() {
	$("#resizable-div").resizable({
		animate: true
	});
});

$(function() {
	$("#resizable-div").resizable({
		maxHeight: 200,
		maxWidth: 500,
		minHeight: 100,
		minWidth: 200
	});
});

View DemoDownload

Vincy
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

Related Tutorials

↑ Back to Top

Share this page