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

onresizeend event | resizeend event

Browser support:
Occurs when the user stops resizing an element in an editable region.
An editable region can be specified with the contentEditable and designMode properties.
If you would like to receive a notification when the user stops dragging an element, use the onmoveend event.

How to register:

In HTML:
<ELEMENT onresizeend="handler">

In JavaScript:
object.onresizeend = handler;
object.attachEvent ("onresizeend", 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 Yes
Cancelable No
Event object -

Actions that invoke the onresizeend event:

  • Stopping to resize an element in an editable region.

The order of events related to the onresizeend event:

  1. onresizestart
  2. onresize
  3. onresizeend

Example HTML code 1:

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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content