0

I am using jQuery to resize an element when the window is resized using:

$(window).resize(function() {
  topHeight = $("#top").height();
  height = $(window).height() - 210;
  $("#container").height(height);
  $("#g").height(height-25);
});

With the topHeight getting the most recent height of the top bar since it can rearrange.

My problem is that I can't figure out a way to resize the #container when the #top changes height. I've tried using $("#topRow").resize(function() { }), but it seems as though that doesn't work with elements.

Lance Roberts
  • 22,383
  • 32
  • 112
  • 130
Dyne
  • 9
  • 1
  • 4
  • possible duplicate of [Detecting when a div's height changes using jQuery](http://stackoverflow.com/questions/172821/detecting-when-a-divs-height-changes-using-jquery) – Ajinkya Mar 19 '13 at 18:00

1 Answers1

2

You have to catch every event when #top's height changes.

If it happens when you resize the window, then you should bind your logic to window.resize, so your code in the question should work.

If there are other events when #top changes its height, then you should bind the logic there too.

Update: in the comments you mentioned that there is a multiple selection field, which can make the #topRow element change its height, so that is an event, which you can add your logic to.

Note: there is another option. You create a setInterval which periodically checks the size of #topRow and resises the #container if necessary, but I personally don't recommend this solution.

aorcsik
  • 15,271
  • 5
  • 39
  • 49
  • How do I bind the logic there though? $("#topRow").resize() doesn't seem to do anything – Dyne Mar 19 '13 at 19:51
  • when does `#topRow`'s height change? – aorcsik Mar 20 '13 at 05:21
  • It changes when the width of the browser is changed OR when too many items are added to a customized multiple selection field. – Dyne Mar 20 '13 at 13:55
  • @Dyne So, then there are 2 events: window resize, and when an item is added to the multiple selection field. You have to separate the container height updater logic, and add it to both cases. – aorcsik Mar 20 '13 at 14:20
  • @Dyne added another solution in the answer as a note, but I don't recommend it. – aorcsik Mar 20 '13 at 14:24
  • I found [this](http://benalman.com/projects/jquery-resize-plugin/) which seems to do what I want. I was really hoping to avoid adding more plugins though. It seems to be using a perodic check. – Dyne Mar 20 '13 at 20:17
  • Yes the periodic check is a solution, as I mentioned in the Note of my answer. Hope you could solve your problem with it! – aorcsik Mar 21 '13 at 11:33