jQuery resize() Method
You are Here:
jQuery resize() Method
The jQuery resize() method is used for the following 2 purpose
- To run a callback when a specified element is resized.
- To trigger the resize event of a specified element.
Run a Callback
In the following example, we will run a callback function when a window is resized.
Example
HTML Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>jQuery resize() Method</h1>
<div>Try to resize this window.</div>
<p>Window width is <span></span></p>
<script>
$(document).ready(function(){
$(window).resize(function() {
$("span").text($(window).width() +"px");
});
});
</script>
</body>
</html>
Syntax
// Trigger the resize event
$(selector).resize()
// Attach a callback to resize event
$(selector).resize(callback)
Parameter Values
| Value | Type | Explanation |
|---|---|---|
| callback | Optional | Specifies the function to run when the resize event is triggered. |
Trigger a resize Event
In the following example, we will trigger a resize event when a button is clicked.
Example
HTML Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>jQuery resize() Method</h1>
<div>Try to resize this window or click on the button.</div>
<p>Window width is <span></span></p>
<button>Trigger resize Event</button>
<script>
$(document).ready(function(){
$(window).resize(function() {
$("span").text($(window).width() +"px");
});
$("button").click(function(){
$(window).resize();
});
});
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 99.5% of jQuery Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in jQuery.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
