The resize event occurs when the size of the browser window is changed. jQuery resize() Method attaches window element to an event handler function and this event handler function executes when the resize event occurs.
jQuery resize() Method Syntax
$(window).resize(function(){
//code that executes when the resize event occurs.
});
jQuery resize() Example
In the following example we have attached the window element to the event handler function using resize() method. This method triggers the resize event when the browser window is resized. When the resize event is triggered, the event handler function executes, inside the event handler function we have setup an alert message. This alert message will be displayed whenever we change the size of the browser window. See the screenshots in the output.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(window).resize(function(){
alert("Browser window is resized.")
});
});
</script>
</head>
<body>
<h2>jQuery resize event example on Beginnersbook.com</h2>
<p>An alert message "Browser window is resized" will be displayed
when you change the size of the browser window.</p>
</body>
</html>
Output:
Before the browser window is resized:
This screenshot is taken before we have resized the browser window.
After the browser window is resized:
This screenshot is taken after we have resized the browser window, as you can see we have an alert message on the screen.
Leave a Reply