Skip to content
Related Articles

Related Articles

Improve Article
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.

  1. $(<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’);
  2. $(<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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :