In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > events > onresize

onresize event | resize event

Browser support:

Occurs when the size of an object has changed.

To get the size of an object, use the clientWidth, clientHeight, innerWidth, innerHeight, offsetWidth and offsetHeight properties.

In Firefox, Opera, Google Chrome and Safari, the onresize event is fired only when the size of the browser window is changed.
In Internet Explorer, the onresize event is fired when the size of the browser window or an element is changed.

Note: the onresize event is supported by the body, frameset, document and window elements in Firefox, Opera, Google Chrome and Safari. They are identical, they fire when the size of the browser window is changed. Example 1 and 2 demonstrate it.

The placement of an element can be specified with the left, top, right, bottom, width and height style properties. The left, top, right and bottom properties only have effect on relative, absolute or fixed positioned elements. When the size of an element is changed by script, an onresize event is fired on the element in Internet Explorer.

If you would like to receive a notification when the position of an element changes, use the onmove event.

How to register:

In HTML:

In JavaScript:

object.onresize = handler;

object.addEventListener ("resize", handler, useCapture);

9

object.attachEvent ("onresize", handler);

You can find the related objects in the Supported by objects section below.

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles

Cancelable

Event object

UIEvent

9

Event

Actions that invoke the onresize event:

Internet Explorer	Firefox, Opera, Google Chrome, Safari
Changing the size of the browser window. Invoking the resizeBy or resizeTo method.	Changing the size of the browser window. Invoking the resizeBy or resizeTo method. Changing the size of an element by script. Resizing the browser window if it causes the size of an absolute or fixed positioned element to change. Resizing an element in an editable region (see the contentEditable and designMode properties).

Actions that do not invoke the onresize event:

Resizing the browser window if it causes the size of a static or relative positioned element to change.

The order of events related to the onresize event:

Action	Event order
Resizing an element in an editable region	onresizestart onresize onresizeend
Any other action that invokes the onresize event.	onresize

Example HTML code 1:

This example illustrates the onresize event for the body element:

<head>
    <script type="text/javascript">
        function OnResizeDocument () {
            alert ("The size of the window or the document has changed.");
        }
        
        function RemoveBlue () {
            var blueDiv = document.getElementById ("blueDiv");
            if (blueDiv) {
                blueDiv.parentNode.removeChild (blueDiv);
            }
        }
    </script>
</head>
<body onresize="OnResizeDocument ()">
    If you remove the blue element, the height of the document decreases.
    <br />
    <button onclick="RemoveBlue ();">Remove the blue element</button>
    <br /><br />
    When the size of the document changes, an onresize event is fired on the body element in Internet Explorer.
    In Firefox, Opera, Google Chrome and Safari, an onresize event is fired on the body element when the browser window is resized.
    Resizing the browser window fires the onresize event in Internet Explorer, too.
    Try it, resize the browser window!
    <br /><br />
    <div id="blueDiv" style="height:500px; background-color:blue;"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example is equivalent to the previous one:

<head>
    <script type="text/javascript">
        window.onresize = OnResizeDocument;
        function OnResizeDocument () {
            alert ("The size of the window or the document has changed.");
        }
        
        function RemoveBlue () {
            var blueDiv = document.getElementById ("blueDiv");
            if (blueDiv) {
                blueDiv.parentNode.removeChild (blueDiv);
            }
        }
    </script>
</head>
<body>
    If you remove the blue element, the height of the document decreases.
    <br />
    <button onclick="RemoveBlue ();">Remove the blue element</button>
    <br /><br />
    When the size of the document changes, an onresize event is fired on the window in Internet Explorer.
    In Firefox, Opera, Google Chrome and Safari, an onresize event is fired on the window when the browser window is resized.
    Resizing the browser window fires the onresize event in Internet Explorer, too.
    Try it, resize the browser window!
    <br /><br />
    <div id="blueDiv" style="height:50px; background-color:blue;"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the onresize event for a div element:

<head>
    <style>
        #blueDiv {
            position: absolute;
            left: 10px;
            top: 10px;
            width: 100px;
            height: 50px;
            background-color: blue;
        }
    </style>
    <script type="text/javascript">
        function ChangeSize (){
            var blueDiv = document.getElementById ("blueDiv");
            blueDiv.style.width = "200px";;
            blueDiv.style.height = "100px";;
        }

        function OnResize (blueDiv) {
            var w = blueDiv.offsetWidth;
            var h = blueDiv.offsetHeight;
            alert ("The size of the blue element will change to " + w + " * " + h);
        }
    </script>
</head>
<body>
    <div id="blueDiv" onresize="OnResize (this);"></div>
    <button onclick="ChangeSize ();">Change the size of the blue element</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example shows a case when resizing the browser window causes an onresize event to be fired:

<head>
    <style>
        .blueDiv {
            position: absolute;
            left: 10px;
            top: 10px;
            right: 400px;
            bottom: 300px;
            background-color: blue;
        }
    </style>
    <script type="text/javascript">
        function OnResize (blueDiv) {
            var w = blueDiv.offsetWidth;
            var h = blueDiv.offsetHeight;
            alert ("The size of the blue element will change to " + w + " * " + h);
        }
    </script>
</head>
<body>
    Start to resize the browser window!
    <div class="blueDiv" onresize="OnResize (this);"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 5:

This example illustrates the use of the onresize event for an absolute positioned element in an editable region:

<head>
    <script type="text/javascript">
            // the '2D-position' command throws an exception in Firefox
        try {
                // enables moving absolute and relative positioned elements by dragging
            document.execCommand ("2D-position", false, true);
        }
        catch (e) {};
        
        function UpdateCoords (blueElem){
            var posX = document.getElementById ("posX");
            var posY = document.getElementById ("posY");
            posX.innerText = blueElem.offsetWidth;
            posY.innerText = blueElem.offsetHeight;
        }
    </script>
</head>
<body>
    Select and resize the blue element with your mouse!
    <div contenteditable="true" style="border:1px solid #000000; height:200px;">
        <div onresize="UpdateCoords (this)" style="width:200px;height:80px; background-color:blue; position:absolute;">
        </div>
    </div>
    <br /><br />
    The size of the blue element:<br />
    width: <span style="color:red" id="posX"></span><br/>
    height: <span style="color:red" id="posY"></span>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 6:

This example dumps the order of events while the user is resizing an absolute positioned element:

<head>
    <script type="text/javascript">
            // the '2D-position' command throws an exception in Firefox
        try {
                // enables moving absolute and relative positioned elements by dragging
            document.execCommand ("2D-position", false, true);
        }
        catch (e) {};
        
        function DumpInfo () {
            var info = document.getElementById ("info");
            info.innerHTML += event.type + ", ";
        }
    </script>
</head>
<body>
    Select and resize the blue element with your mouse!
    <div contenteditable="true" style="border:1px solid #000000; height:200px;">
        <div style="width:200px;height:80px; background-color:blue; position:absolute;"
                onresizestart="DumpInfo ()" onresize="DumpInfo ()" onresizeend="DumpInfo ()">
        </div>
    </div>
    <br /><br />
    <div id="info" style="background-color:#f0f0ff; font-weight:bold;"></div>
</body>