jQuery resize() with Examples

jQuery Web Development Front End Technology

The resize() method in jQuery is used to trigger the resize event. It occurs when the browser window changes size.

Syntax

The syntax is as follows −

$(selector).resize(func)

Above, the parameter func is used to specify the function to run when the resize event is triggered

Example

Let us now see an example to implement the jQuery resize() method−

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
<style src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></style>
<script>
   var count = 0;
   $(document).ready(function(){
      $(window).resize(function(){
         $("span").text(count += 1);
      });
   });
</script>
<style>
span {
   padding: 10px;
   border: 3px dashed orange;
   font-size: 20px;
}
</style>
</head>
<body>
<h2>Windows Resize Count</h2>
<p>Window resized <span>0</span> times.</p>
</body>
</html>

Output

This will produce the following output−

Now, resize the window and get the count of how many times window resized:

AmitDiwan

Updated on: 30-Dec-2019

326 Views

Kickstart Your Career

Get certified by completing the course

Get Started