Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML Basic

HTML Reference

HTML onresize Attribute

Posted in HTML Tutorial
Updated on Sep 22, 2024
By Mari Selvan
👁️ 71 - Views
⏳ 4 mins
💬 1 Comment
HTML onresize Attribute

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
Copy To Clipboard
<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
Copy To Clipboard
<!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
Copy To Clipboard
<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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mari Selvan
Mari Selvan
7 months ago

If you have any doubts regarding this article (HTML onresize Attribute), please comment here. I will help you immediately.

We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy