How To Detect Html Div Width And Height Once Div Is Done Resizing

I am working with two divs where, one in the left is a collapsible container and the one in the right is a main container, something like this: ================================ |

Solution 1:

Read this post as I believe is a more accurate approach, as you fire an event as soon as the transition ends. Callback when CSS3 transition finishes

Solution 2:

I'd try using a timeout with the duration of the transition.

var delay = 2000;
var t = setTimeout(function(){
    var width = $("#div2-id").width();
    clearTimeout(t);
}, delay);

The delay is in milliseconds, so this assumes your CSS transition is 2s.

Solution 3:

The transitionend Event

There is an event called transitionend. Adding a handler to this event will trigger any action after your transition ends instead of using a delay function

example click on the div box that has the text "left" inside.. when the transition ends the width of the div box that has the text "right" will pop up

function handler(){
if(window.getComputedStyle){
alert(window.getComputedStyle(document.getElementById('right'), 'width').width)
}
else {document.getElementById('right').currentStyle.width}
}
function click(){
document.getElementById('left').style.width='0px'

}

document.getElementById('left').addEventListener("transitionend",handler);
document.getElementById('left').addEventListener('click',click,false);

#left{
  float:left;
  transition-property:width;
  transition-duration:3s;
  border:solid;
  width:100px;
  
}
#right{
  border:solid;
  overflow:hidden;
}

<div>
<div id="left">
left
</div>
<div id="right">
ddd
</div>
</div>

Note Beware

this event is only supported browser versions here http://www.w3schools.com/jsref/event_transitionend.asp