Something should trigger, no? I get not supported in IE8 and nothing happening in Fx 3.6.10
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script>
// modified from http://pragmatec.blogspot.com/2009/06/google-toolbar-style-and-tooltip.html
jQuery(function($){
$.fn.dommodhandler = function(options){
function setListeners(){
if (typeof (this.onpropertychange) == "object"){
$('#innerDiv').bind('propertychange',function(e){
$('#msgDiv').html(this.id+' changed</br/>');
});
}
else if ($.browser.mozilla){
$('#msgDiv').html("bind");
$('#innerDiv').bind('DOMAttrModified',function(e){
$('#msgDiv').html(this.id+' changed</br/>');
});
}
else {
$('#msgDiv').html('not supported in this browser');
return false;
}
}
return setListeners();
}
}
);
$(document).ready(function(){
$.fn.dommodhandler ();
});
</script>
</head>
<body>
<div id="wrapper">
<a href="#" onClick="document.getElementById('innerDiv').height='300px';document.getElementById('innerDiv').innerHTML=new Date(); return false">Click</a>
<div id="outerDiv">
<div id="innerDiv">Hello</div>
</div>
<div id="msgDiv"></div>
</div>
</body>
</html>
UPDATE: Still not happy... Anyone have any suggestions to detect when something (ajax) change the actual height of a div due to larger or smaller content