CODEWITHSUNDEEP
jqueryhtmlcss
LeTung
LeTung

Reputation: 123

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

Upvotes: 0

Views: 38

Answers (1)

Derek Story
Derek Story

Reputation: 9583

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
});

Upvotes: 1

Related Questions