BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl
Home / jQuery / jQuery resize() Method

jQuery resize() Method

By Chaitanya Singh

The resize event occurs when the size of the browser window is changed. jQuery resize() Method attaches window element to an event handler function and this event handler function executes when the resize event occurs.

jQuery resize() Method Syntax

$(window).resize(function(){
 //code that executes when the resize event occurs.
});

jQuery resize() Example

In the following example we have attached the window element to the event handler function using resize() method. This method triggers the resize event when the browser window is resized. When the resize event is triggered, the event handler function executes, inside the event handler function we have setup an alert message. This alert message will be displayed whenever we change the size of the browser window. See the screenshots in the output.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(window).resize(function(){
    alert("Browser window is resized.")
  });
});
</script>
</head>
<body>

<h2>jQuery resize event example on Beginnersbook.com</h2>
<p>An alert message "Browser window is resized" will be displayed
when you change the size of the browser window.</p>
</body>
</html>

Output:
Before the browser window is resized:
This screenshot is taken before we have resized the browser window.
jQuery resize example
After the browser window is resized:
This screenshot is taken after we have resized the browser window, as you can see we have an alert message on the screen.
jQuery resize event

❮ PreviousNext ❯

Posted Under: jQuery

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2022 BeginnersBook . Privacy Policy . Sitemap