Tutorials

jQuery resize Event

Posted in jQuery Tutorial

Updated on Nov 21, 2024

By Mari Selvan

👁️ 52 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

In web development, responsive design is crucial for creating user-friendly experiences across various devices and screen sizes. The jQuery resize event plays a significant role in achieving responsiveness by allowing you to detect when the browser window or an element is resized. While the .resize() method is deprecated, jQuery provides a more versatile alternative - .on().

This guide will explore the usage of the jQuery resize event with the .on() method, empowering you to create dynamic and adaptable web applications.

🧠 Understanding resize Event

The resize event in jQuery triggers when the browser window or an element is resized. It enables developers to execute code in response to resizing actions, facilitating adjustments to layout, styling, and functionality based on viewport changes.

💡 Syntax

The syntax for the resize event is straightforward:

syntax.js

Copied

$(selector).on("resize", handler);

📝 Example

Detecting Window Resize:

You can use the resize event to detect when the browser window is resized. Here's a simple example:
example.js
Copied
```
$(window).on("resize", function() {
    console.log("Window resized");
});
```
This will log "Window resized" to the console whenever the browser window is resized.
Handling Element Resize:

Similarly, you can detect the resize event on specific elements. For instance:
index.html
Copied
```
<div id="resizableDiv" style="width: 200px; height: 200px; background-color: lightblue;"></div>
```
example.js
Copied
```
$("#resizableDiv").on("resize", function() {
  console.log("Div resized");
});
```
This will log "Div resized" to the console when the resizableDiv element is resized.
Responsive Layout Adjustments:

The resize event is particularly useful for making responsive layout adjustments. For example, let's adjust the font size based on window width:
example.js
Copied
```
$(window).on("resize", function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
      $("body").css("font-size", "14px");
  } else {
      $("body").css("font-size", "16px");
  }
});
```
This code dynamically adjusts the font size of the <body> based on the window width.

🎉 Conclusion

The jQuery resize event, coupled with the .on() method, provides a powerful mechanism for creating responsive web applications. Whether you need to respond to window resizing or element resizing, this event allows you to execute custom code to adapt your layout and functionality accordingly.

By incorporating the resize event into your development toolkit, you can ensure that your web pages deliver a seamless experience across various devices and screen sizes.