SO Help: jQuery event when some dom element changed height
by SpYk3
HTML
<textarea></textarea>
<br /><button id="btnChangeBody">Click to change body</button>
<br /><button id="btnStopStart">Stop Timer</button>
<hr />
<label for="txtEle">Element</label> <input id="txtEle" name="txtEle" disabled="disabled" /><br />
<label for="txtHeight">Height</label> <input id="txtHeight" name="txtHeight" disabled="disabled" /><br />
<label for="txtOuter">Outer</label> <input id="txtOuter" name="txtOuter" disabled="disabled" /><br />
CSS
label, input { display: inline-block; margin-bottom: 1em; padding: 0 .5em; }
label { width: 4em; text-align: right; }
input { width: 6em; }
JavaScript
(function($) {
if (!$.onHeightChange) {
$.extend({
onHeightChange: function(callBack) {
if (typeof callBack == "string") {
switch (callBack.toLowerCase()) {
case "play":
$.onHeightChange.init();
break;
case "stop":
try { clearInterval($.onHeightChange.timer); } catch(err) { };
break;
}
}
else if (typeof callBack == "function" || callBack == undefined)
{
$.onHeightChange.callback = callBack;
$.onHeightChange.init(callBack);
}
}
});
$.onHeightChange.timer;
$.onHeightChange.init = function(callBack) {
$("body,body *").each(function(i) {
$(this).data("onHeightChange", { height: $(this).height(), outer: $(this).outerHeight() });
});
try { clearInterval($.onHeightChange.timer); } catch(err) { };
$.onHeightChange.timer = setInterval(function() {
$("body, body *").each(function(i) {
if ($(this).data("onHeightChange").height != $(this).height()) {
$(this).data("onHeightChange", { height: $(this).height(), outer: $(this).outerHeight() });
if ($.onHeightChange['callback']) {
if (typeof $.onHeightChange.callback == "function") return $.onHeightChange.callback .call(this, $(this), $(this).height(), $(this).outerHeight());
}
}
});
}, 100);
};
}
})(jQuery);
$.onHeightChange(function(ele, height, outer) {
$("#txtEle").val(ele[0].tagName);
$("#txtHeight").val(height);
$("#txtOuter").val(outer);
});
$("#btnChangeBody").click(function(e)...