Generally resize means to make something different size. In graphical user interfaces, we can size windows to make them larger or smaller. According to JQuery langauge, the resize event occurs when the size of the browser window changes. It binds event handler to resize event or binds a function which is to be executed when resize event occurs. It is used to perform some desired actions such as adjusting page elements depending on the window size in order to avoid scroll bars etc. If the dimensions of the element changes, then inside elements also should adjust as well when the resize event triggers. It is useful when creating application like layouts.
JQuery Resize() Syntax
$(window).resize(function)
It has parameter called function which specifies the function to be run when resize event occurs.
JQuery Resize() Example
<!doctype html> <head> <title>JQuery Resize Event</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <h2>JQuery Resize Event Example</h2> <script type="text/javascript"> $(document).ready(function(){ $(window).resize(function(){ alert("Window is resized;" +"\n" + "Width="+$(window).width()+ "\n" + "Height="+$(window).height()); }); }); </script> <body> <p>Resize the window to see Width and Height</p> </body> </html>
- As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
- $(window).resize(function()) line defines resize event which occurs when the size of the browser window changes. When you click on the maximize button on the top corner, you would see the alert message with new window width and height.
- When window is resized, it displays width and height of the window by using alert box.
JQuery Resize() Example Demo
When you run the above example, you would get the following output :