Dynamic Div RESIZE Event For Synchronizing Height Or Other Changes

by bizamajig

HTML

<label>change me<br /><textarea>Hello</textarea></label>

<div id="dynamic">Hello</div>

<div id="widget"></div>

CSS

label { display: block; }

textarea {
   width: 250px;
   height: 100px;
}

#dynamic {
   margin: 5px;
   padding: 10px;
   border: 1px dashed gray;
   width: 50%;    
}

#widget {
   position: absolute;
   top: 0;
   left: 0;
   height: 10px;
   width: 100%;
   background-color: yellow;
}

textarea {
   resize: none;   
}

JavaScript

function changeContent($div, content) {
   $div.html(content).trigger($.Event('resize'));
}

// change the html in #content whenever textarea is updated
$('textarea').on('keyup', function() {
   changeContent($('#dynamic'), $(this).val().replace(/\n/g, "<br />\n")); 
});

// move a widget whenever #dynamic or textarea gets resized
$('#dynamic').bind('resize', function(e) {
    var $d = $('#dynamic'), h = $d.offset().top + $d.outerHeight() + 20;
    $('#widget').stop().animate({top: h+'px'}, 500);
});

$('#dynamic').resize(); // position our widget initially