Tutorials


JavaScript BOM window.onresize


The window.onresize event in JavaScript is part of the Browser Object Model (BOM) and is triggered when the browser window is resized. This event allows developers to execute code in response to changes in the window's dimensions, making it useful for creating responsive web designs, adjusting layouts, or modifying elements based on the new size of the viewport.

Key Features of window.onresize

  1. Event Handler:

    • The window.onresize property can be assigned a function that will be called whenever the window is resized.
    • Syntax:
      window.onresize = function() {
    // Code to be executed when the window is resized
};

  2. Single Handler Limitation:

    • Similar to the window.onload event, the window.onresize event can only hold one function at a time. Assigning a new function will overwrite the previous one.
    • To add multiple functions, you can use addEventListener().

  3. Event Object:

    • The function assigned to onresize can also receive an event object, which provides information about the resize event.

Example Usage

Here’s a simple example demonstrating how to use window.onresize to log the new dimensions of the window when it is resized:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Window OnResize Example</title>
    <style>
        body {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <h1>Resize the window!</h1>
    <script>
        window.onresize = function() {
            console.log("Window resized to: " + window.innerWidth + " x " + window.innerHeight);
        };
    </script>
</body>
</html>

Using addEventListener

To avoid the limitation of only having one function assigned to window.onresize, you can use addEventListener() to add multiple functions that will run when the resize event occurs:

window.addEventListener('resize', function() {
    console.log("Window resized!");
});

window.addEventListener('resize', function() {
    // Another action on resize
    console.log("New dimensions: " + window.innerWidth + " x " + window.innerHeight);
});

Key Considerations

  • Performance: The onresize event can fire frequently during window resizing, potentially leading to performance issues if heavy computations or DOM manipulations are executed in the event handler. To mitigate this, consider using debouncing or throttling techniques. This involves limiting how often the function executes during a resize event.

  • Responsiveness: Using the onresize event is crucial for responsive web design. It allows you to adapt layouts, reposition elements, or change styles based on the current window size.

  • Cross-Browser Compatibility: The window.onresize event is well-supported across modern browsers, but behavior might vary slightly in older browsers.

  • Usability: Ensure that any changes made in response to the resize event enhance the user experience. Overly aggressive resizing behavior (like adjusting styles too often) can be disruptive.

Summary

The window.onresize event provides a way to respond to changes in the browser window's size. It is useful for making web applications more responsive and adapting layouts as needed. However, due to its potential to trigger frequently during resizing, developers should be mindful of performance and usability considerations when implementing functionality tied to this event.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about