beginnersbook.com

  • Home
  • All Tutorials
    • Learn Servlet
    • Learn JSP
    • Learn JSTL
    • Learn C
    • Learn C++
    • Learn MongoDB
    • Learn XML
    • Learn Python
    • Learn Perl
    • Learn Kotlin
  • Core Java
  • OOPs
  • Collections
  • Java I/O
  • JSON
  • DBMS

jQuery resize() Method

By Chaitanya Singh | Filed Under: jQuery

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 ❯

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()

Recently Added..

  • JSON Tutorial
  • Java Regular Expressions Tutorial
  • Java Enum Tutorial
  • Java Annotations Tutorial

Copyright © 2012 – 2021 BeginnersBook . Privacy Policy . Sitemap