jQuery resize() method
The jQuery resize() method is an inbuilt method which is used when the browser window change its size.
Syntax:
$(selector).resize(function)
Parameter: This method accepts single parameter function which is optional. It is used to specify the function to run when the resize event is called.
Example 1: In this example, we will increase the size of the text by using resize() method.
HTML
<!DOCTYPE html> <html> <head> <title>The resize method</title> <script src= </script> <!-- jQuery code to show the working of this method --> <script> x = 0; $(document).ready(function () { $(window).resize(function () { $("p").text(x += 1); }); }); </script> <style> div { width: 150px; height: 100px; padding: 20px; border: 2px solid green; font-size: 20px; } </style> </head> <body> <div> <!-- press "ctrl" and "+" key together and see the effect --> Welcome to GfG! <br> <p>0</p> times. </div> </body> </html> |
Output:
Example 2: In this example, we will decrease the size of the text by using resize() method.
HTML
<!DOCTYPE html> <html> <head> <title>The resize method</title> <script src= </script> <!-- jQuery code to show the working of this method --> <script> x = 0; $(document).ready(function () { $(window).resize(function () { $("p").text(x -= 1); }); }); </script> <style> div { width: 150px; height: 100px; padding: 20px; border: 2px solid green; font-size: 20px; } </style> </head> <body> <div> <!-- press "ctrl" and "-" key together and see the effect --> Welcome to GfG! <br> <p>0</p> times. </div> </body> </html> |
Output:
Please Login to comment...