How to trigger the window resize event in jQuery ?
Last Updated :
01 Dec, 2020
In this article, we are going to discuss how to trigger the window resize event using jQuery. For this purpose, we will use the following library functions provided by jQuery.
- $(<element>).trigger(): This library function allows us to trigger both native and customized events. The method can be used independently or can be launched by another event. In this case, we will use the native JavaScript event ‘resize’ in order to trigger the resize event as per our convenience. The syntax would be: $(window).trigger(‘resize’);
- $(<element>).resize(): This method is used to listen to resize events. The method can take callback functions as parameters, which will be executed once the resize event is encountered.
jQuery CDN link:
<script src=”https://code.jquery.com/jquery-3.5.1.min.js” integrity=”sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=” crossorigin=”anonymous”></script>
Here, the resize event will be triggered on a button for easier understandability.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<script src=
integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
</head>
<body>
<button id="res" style="
background-color: green;
color: white;
font-size: 30px;
border: none;
border-radius: 28px;
width: 200px;
height: 100px;
outline: none;
cursor: pointer;">
Resize
</button>
<br>
<p id="gfg" style>
(for Geeks For Geeks)
</p>
<script>
$(document).ready(() => {
$('#res').on('click', () => {
$(window).trigger('resize');
});
$(window).resize(() => {
console.log("resize function called");
})
});
</script>
</body>
</html>
|
Output of the given Code Snippet:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...