HTML onresize Attribute

Posted in HTML Tutorial

Updated on Jan 29, 2024

By Mari Selvan

👁️ 24 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The onresize attribute in HTML is a powerful tool that allows developers to specify JavaScript code that should be executed when the browser window is resized.

This attribute is commonly used to trigger dynamic changes or updates in the web page layout based on the dimensions of the viewport.

🎯 Purpose of onresize

The primary purpose of the onresize attribute is to enable developers to respond to changes in the size of the browser window.

This can be crucial for creating responsive and adaptive web designs that adjust to different screen sizes and orientations.

💎 Values

The onresize attribute accepts a JavaScript code or function that will be executed when the resize event occurs.

It can be set to call an existing JavaScript function or contain inline JavaScript code. For example:

onresize.html

Copied

<body onresize="myFunction()">

🧠 How it Works

In this example, the myFunction() JavaScript function will be called whenever the browser window is resized.

📄 Example

Let's look at a simple example of how to use the onresize attribute in an HTML document:

onresize.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>onresize Example</title>
  <style>
    body {
      text-align: center;
    }
  </style>
  <script>
    // JavaScript function to be executed on resize
    function handleResize() {
      alert("Window has been resized!");
    }
  </script>
</head>
<body onresize="handleResize()">
  <h1>HTML onresize Attribute Example</h1>
  <p>Resize the browser window to see the alert.</p>
</body>
</html>

🧠 How it Works

In this example, the handleResize() function is triggered whenever the browser window is resized, displaying an alert to notify the user.

🔄 Dynamic Values with JavaScript

You can also dynamically set the onresize attribute using JavaScript.

This can be useful when you want to customize the resize behavior based on certain conditions or user interactions. Here's a brief example:

onresize.html

Copied

<script>
  // Dynamically set onresize behavior
  window.onresize = function() {
    console.log("Window has been resized dynamically!");
  };
</script>

🧠 How it Works

In this script, the onresize attribute is set to an anonymous function that logs a message to the console whenever the window is resized. This dynamic approach allows for greater flexibility in handling resize events.

🏆 Best Practices

Use the onresize attribute judiciously, considering the specific requirements of your web page.
Be mindful of the performance implications of executing JavaScript on resize, especially if the code involves complex operations.
Test your web page across different devices and screen sizes to ensure a seamless user experience.

🎉 Conclusion

The onresize attribute is a valuable feature for creating responsive and dynamic web pages that adapt to varying viewport sizes.

By leveraging this attribute, developers can enhance the overall user experience and ensure their web content remains visually appealing across different devices.