How to detect CSS3 resize events

Asked
Active3 hr before
Viewed126 times

8 Answers

resizedetect
90%

"Use a combination of mousedown, mousemove and/or mouseup",Use a combination of mousedown, mousemove and/or mouseup to tell whether the div is being / has been resized. If you want really fine-grained control you can check in every mousemove event how much / if the div has been resized. If you don't need that, you can simply not use mousemove at all and just measure the div in mousedown and mouseup and figure out if it was resized in the latter.,Unfortunately, the onresize event seems not to be fired on the div. How can I detect in JavaScript when such a user-instantiated resize has happened?,Since the resize event clearly doesn't work (currently, at least), you can try one of these alternative options:

let observer = new MutationObserver(function(mutations) {
   console.log('mutations:', mutations);
});

let child = document.querySelector('textarea');
observer.observe(child, {
   attributes: true
});
<textarea></textarea>
load more v
88%

In some earlier browsers it was possible to register resize event handlers on any HTML element. It is still possible to set onresize attributes or use addEventListener() to set a handler on any element. However, resize events are only fired on the window object (i.e. returned by document.defaultView). Only handlers registered on the window object will receive resize events.,There is a proposal to allow all elements to be notified of resize changes. See Resize Observer to read the draft document, and GitHub issues to read the on-going discussions.,If the resize event is triggered too many times for your application, see Optimizing window.onresize to control the time after which the event fires.,You could set up the event handler using the addEventListener() method:

<p>Resize the browser window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>
load more v
72%

What is being reported?,ResizeObserver lets you know when an element's size changes.,When is it being reported?,Another use case is for any kind of custom element that is doing its own layout. Until ResizeObserver, there was no reliable way to get notified when its dimensions change so its children can be laid out again.

var ro = new ResizeObserver(entries => {
   for (let entry of entries) {
      const cr = entry.contentRect;
      console.log('Element:', entry.target);
      console.log(`Element size: ${cr.width}px x ${cr.height}px`);
      console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
   }
}); // Observe one or multiple elementsro.observe(someElement);
load more v
65%

The EQCSS project is a draft specification and implementation of element queries in CSS.,If you want to go the ResizeObserver-Vanilla path I recommend this excellent guide.,Element Resize Detector claims to be “37x faster than related approaches”,You can easily download it and write queries as below.

1
load more v
75%

I have the following example html, which has a DIV with a width of 100%.It contains some elements.Internal elements may be repositioned and div sizes may change when executing window resizing.I asked if it was possible to hook up div size change events?And how do you do that?I currently bind the callback function to the jQuery resize event on the target DIV, but there is no console log output, see the following: , Do not use the jQuery onresize plug-in because it uses the setTimeout() loop to check for changes. This is slow and inaccurate. , There are others that I don't list here, but you can search freely.I can't say which of the currently available options is the best.You have to try something and make a decision. , There is only Window.onResize in the specification, but you can always use IFrame to generate new Windows objects in DIV.

<html>
<head>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" language="javascript">
            $('#test_div').bind('resize', function(){
                console.log('resized');
            });
    </script>
</head>
<body>
    <div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
    </div>
</body>
</html>
load more v
40%

window.resize = event => {
   // Code here
};
22%

The CSS3 resize property can be assigned to arbitrary elements. I’m looking for a way to detect such a resize on, say, divs (I don’t mind it only working in Firefox at the moment):,Unfortunately, the onresize event seems not to be fired on the div. How can I detect in JavaScript when such a user-instantiated resize has happened?, How to set min/max lenght of Random Name created? , How to change the text of a progress bar

div {
   resize: horizontal;
   overflow: hidden;
}
60%

Method 1: Using resize event: We can add an event listener to the body element which fires every time when the window size is resized.,Using Resize Observer API,The window resize event occurs whenever the size of the browser window gets changed. We can listen to the resize event in two ways:,Method 2: Using ResizeObserver API: We can use the latest ResizeObserver API to listen the window resize event. This API is not fully supported.