How to set an element’s width change listen to the change of another element’s width?

Question

This is my code, which is not working.

html:

<div class=“footerA”> aaaa </div> <div class=“footerB”></div>

Jquery

$(‘.footerA’).on(‘resize’,function(){ $(‘.footerB’).css(‘width’, $（‘.footerA’).width()) })

I expect footerB’s width changes to when footerA’s width change. The change means when I expand/shrink the browser.

But it doesnt work. Please help.

With further details - such as the (relevant) [mcve] code of your page- this may be possible with CSS rather than requiring JavaScript, or jQuery. — David Thomas, Aug 03 '23 at 14:11
Also, be sure never to use curly quotes in your code. E.g. never `“` or `‘`. Instead use `"` or `'` — j08691, Aug 03 '23 at 14:12

Harrison · Answer 1 · 2023-08-03T16:28:39.303

If you want a JS solution, see here:

You cannot bind "resize" to elements, instead use ResizeObserver

Also note that you should use some inline-type element/styling. div elements are display: block by default, hence I've added display: inline-block; to show this point.

In the snippet, I made #footerA editable (like an input) so that you can change the div's content.

const footerA = document.getElementById("footerA");
const footerB = document.getElementById("footerB");

const resizeObserverCallback = () => {
  footerB.style.width = `${footerA.getBoundingClientRect().width}px`;
}

if (footerA && footerB) {
  new ResizeObserver(resizeObserverCallback).observe(footerA)
}

.footer {
  background-color: orange;
  display: inline-block;
}

<div id="footerA" class="footer" contenteditable="true">aaaa</div>
<div id="footerB" class="footer">bb</div>

This question could be a duplicate of this question

The `if (footerA && footerB) {` should be around the `new` constructor, not inside the observer API callback. — Roko C. Buljan, Aug 03 '23 at 15:34

How to set an element’s width change listen to the change of another element’s width?

1 Answers1