Lê Tùng Lê Tùng - 2 months ago 8
CSS Question

Jquery :Automatically change the width equal to an element

First, sorry for my english is bad :)

dm3
a width depends on the
tx1...n
,
tx1...n
automatically sorted 2-3-4 -... column width when the window is changed, or a different module appear changed
dm3
width.

Now I want a simple jquery, when
dm3
change the width,
dm1
will automatically change the width equal to
dm3
.

Note:
dm1
changes when
dm3
change, not just change when the page loads.

EX:

<div class="dm1">
<div class="to1">...</div>
<div class="to2">...</div>
</div>
<div class="dm2">
....
</div>
<div class="dm3">
<div class="tx1">..Content..</div>
<div class="tx2">..Content..</div>
<div class="tx3">..Content..</div>
...
<div class="txn">..Content..</div>
</div>


Result:

<div class="dm1" style="width: 500px/600px;">
<div class="to1">...</div>
<div class="to2">...</div>
</div>
<div class="dm2">
....
</div>
<div class="dm3"> /* div width is 500px/600px */
<div class="tx1">..Content..</div>
<div class="tx2">..Content..</div>
<div class="tx3">..Content..</div>
...
<div class="txn">..Content..</div>
</div>


Thanks for helping me

Answer

I think something like this should work for you:

JS Fiddle Example

$(window).on('load resize', function() { // On load or window resize
    var dm3Width = $('.dm3').width() // Get dm3 width
    $('.dm1').width(dm3Width); // Make dm1 width match dm3 width
});