resize

16 March, 2023

Contributors

Milsaware

@milsaware

About

The resize event is an event that is triggered whenever the browser window or an element within it is resized. This event can be useful for detecting changes in the size of the viewport or specific elements on a page, and updating the layout or content accordingly.

When the resize event is triggered, it passes an event object that contains information about the new size of the element. This information can be used to perform various actions, such as adjusting the position of elements, changing the size of images or videos, or updating the layout of the page.

Event listener

Here's an example of using an event listener to handle the resize event:

HTML

<h1>Resize the Window to See the Effect</h1>
<div id="content">
    <p>The current size of the window is:</p>
    <p id="size"></p>
</div>

JavaScript

const content = document.getElementById('content');
const size = document.getElementById('size');

// Add an event listener to the window object for the resize event
window.addEventListener('resize', function() {
    // Update the size element with the new width and height of the window
    size.textContent = window.innerWidth + ' x ' + window.innerHeight;

    // Change the background color of the content element based on the window width
    if (window.innerWidth < 768) {
        content.style.backgroundColor = 'lightblue';
    } else {
        content.style.backgroundColor = 'lightgreen';
    }
});

Here, we have a div element with an id of content that contains a p element with an id of size. We add an event listener to the window object for the resize event.

When the resize event is triggered, the event listener function updates the size element with the new width and height of the window using the window.innerWidth and window.innerHeight properties. It also changes the background colour of the content element based on the width of the window.

Property

Here's an example of using the onresize property to handle the resize event:

const content = document.getElementById('content');
const size = document.getElementById('size');

// Set the onresize property of the window object to a function
window.onresize = function() {
    // Update the size element with the new width and height of the window
    size.textContent = window.innerWidth + ' x ' + window.innerHeight;

    // Change the background color of the content element based on the window width
    if (window.innerWidth < 768) {
        content.style.backgroundColor = 'lightblue';
    } else {
        content.style.backgroundColor = 'lightgreen';
    }
};

Here, we have a div element with an id of content that contains a p element with an id of size. We set the onresize property of the window object to a function.

When the resize event is triggered, the function assigned to the onresize property updates the size element with the new width and height of the window using the window.innerWidth and window.innerHeight properties. It also changes the background colour of the content element based on the width of the window.

Inline

Here's an example of using the onresize attribute inline in an HTML document:

<body onresize="alert('The window was resized!');">
    <h1>Resize the Window to See the Effect</h1>
    <p>When you resize the window, an alert box will appear.</p>
</body>

Here, we have set the onresize property of the body element to an inline function that displays an alert box when the resize event is triggered.

Note that this is not a recommended practice, as inline event handlers can make your code harder to read and maintain. It is generally better to use the addEventListener() method to add event listeners in your JavaScript code.

Programmatic trigger

The resize event cannot be triggered programmatically using the resize() method. This is because the resize event is triggered by the user when they resize the window or when the window size changes for some other reason, such as when the device is rotated on a mobile device.

However, you can change the size of the window programmatically using the resizeTo() method or the resizeBy() method in JavaScript. When you change the size of the window using these methods, the resize event will be triggered automatically. Here's an example:

HTML

<button onclick="resizeWindow()">Resize Window</button>