Jquery .resize() function Example

Jquery .resize() function Example

By Yashwant Chavan, Views 1153, Date 06-Oct-2015

Today we are going to learn about Jquery .resize() function along with demo example. In early days before css media queries, developers use javascript functions to adjust the content / navigation menu script positioning when ever the window size get resized

tags jquery

Jquery .resize() function Syntax

It is used to bind an event handler when the "resize" event is fired. In the first syntax handler function get executed each time when the resize is happened. If you want to pass data along with handler you can use second option.

.resize( handler );
.resize( [eventData ], handler );

Jquery .resize() function Example

In below example we are going to bind the resize event to window element, whenever the browser window's size is changed, it fire the resize function handler and display the appropriate message.

<!DOCTYPE html>
<html>
   <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
      <script>
         $(document).ready(function(){         
          $( window ).resize(function() {
           $( "#output" ).html( "<p> Width :- "+$(window).width()+ " Height :- "+$(window).height() + "</p>");
          });   
         });  
      </script>     
   </head>
   <body>
      <h1>Jquery .resize() Function Example</h1>
      <div id="output"></div>
   </body>
</html>

Output

Jquery .resize() Function Example
Yashwant

Yashwant

Hi there! I am founder of technicalkeeda.com and programming enthusiast. My skills includes Java,J2EE, Spring Framework, Nodejs, PHP and lot more. If you have any idea that you would want me to develop? Lets connect: yashwantchavan[at][gmail.com]