Set width and height of a DIV based on another div

Question

How do I set width and height of a DIV based on another div?

This is how I've done it but it works only when the alert is present??

var readyC = setInterval(function() {
  if (Condition) {
    $('#divAA').width($('#divBB').width()).height($('#divBB').height()); 
          //alert($('#divBB').width())  // works when this is uncommented?? 
  }
  clearInterval(readyC);
}, 10);

EDIT:

Fixed typo:

$('#divBB'+i) to $('#divBB')

How are you binding `i` in that? – mohamedrias Apr 11 '15 at 03:26 — mohamedrias, Apr 11 '15 at 03:26
@mohamedrias: yes, that's a typo. Please ignore. thanks. – Fergoso Apr 11 '15 at 03:26 — Fergoso, Apr 11 '15 at 03:26

score 0 · Answer 1 · edited May 23 '17 at 12:28

0

If the content of your divs are loaded dynamically, then you will need to use window.load event to get its correct height as discussed here: https://stackoverflow.com/a/13071846/1845408

$(window).load(function() {
    $('#divAA').width($('#divBB').width()).height($('#divBB').height()); 
});

edited May 23 '17 at 12:28

Community

1
1

answered Apr 11 '15 at 03:26

renakre

8,001
5
46
99

score 0 · Accepted Answer · edited Apr 11 '15 at 03:47

0

The reason why you're getting it only when you keep an alert is, you're using setInterval with such small interval of 10ms.

When you use alert, the execution is stopped and that's why you see the div resized. You must increase the interval to a higher value.

Also clearInterval is not inside else block, So it means what the timer will clear on first attempt itself. In that case you don't need a setInterval at all.

Update based on comments

As you're looping through a list of divs to update the height of other divs, you must use self invoking function to bind the value of i correctly.

edited Apr 11 '15 at 03:47

Avinash Raj

172,303
28
230
274

answered Apr 11 '15 at 03:28

mohamedrias

18,326
2
38
47

ok... So what do you suggest as the solution? increasing the interval? – Fergoso Apr 11 '15 at 03:29
May i know why you're using setInterval in this case? But yes, increasing the interval will fix it. Because setting height and width statement is proper. – mohamedrias Apr 11 '15 at 03:31
to execute the resizing after certain conditions are true. – Fergoso Apr 11 '15 at 03:32
Okay great. So whether it need to run multiple times or just once? – mohamedrias Apr 11 '15 at 03:32
If the resizing of divs need to run only once then the `clearInterval(readyC);` statement must be present inside the `if` block – mohamedrias Apr 11 '15 at 03:33
once only but for multiple divs. I'm using a loop (as you spotted in the typo). Everything works except for the delay issue... – Fergoso Apr 11 '15 at 03:34
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/74983/discussion-between-mohamedrias-and-fergoso). – mohamedrias Apr 11 '15 at 03:35
did you use IIFE inside your for loop to bind i value correctly? – mohamedrias Apr 11 '15 at 03:36
Immediately Invoked Functional Expression. It's basically a self invoking function. `(function(i) { your code here })(i);` This wil make sure that the value of `i` is bound correctly. if not it will always take the last value of `i` in that iteration – mohamedrias Apr 11 '15 at 03:37
now inside that for loop, wrap your setInterval code inside the IIFE function. It will work as you desire – mohamedrias Apr 11 '15 at 03:39
Cool :) But in case you find any issues. Do remmeber to wrap it inside IIFE – mohamedrias Apr 11 '15 at 03:41
thanks. btw, any comments on the `clearInterval()` positioning? – Fergoso Apr 11 '15 at 03:43
it must be inside the if conditin based on your current code. Because as of now, it will clear the timer whether the condition fails or succeds – mohamedrias Apr 11 '15 at 03:43
Great! Enjoy your day :) – mohamedrias Apr 11 '15 at 03:45

Set width and height of a DIV based on another div

2 Answers2