Determining Changes in DIV Height or CSS Attributes

When working with web pages, it's often necessary to track changes in the height or other CSS attributes of elements. jQuery provides various options to address this need.

Event Tracking with 'change()':

While the 'change()' event is primarily used for input elements, it can be customized to detect CSS changes. However, this approach involves periodically checking the element's CSS properties and triggering an event if they differ from the previous values:

var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');
function checkForChanges()
{
    if ($element.css('height') != lastHeight)
    {
        alert('xxx');
        lastHeight = $element.css('height'); 
    }

    setTimeout(checkForChanges, 500);
}

Custom Event Binding with 'bind()':

A more efficient solution involves creating a custom event and binding it to the desired element:

$('#mainContent').bind('heightChange', function(){
        alert('xxx');
    });


$("#btnSample1").click(function() {
    $("#mainContent").css('height', '400px');
    $("#mainContent").trigger('heightChange'); //<====
    ...
});    

In this case, we trigger the 'heightChange' event whenever the height of the 'mainContent' div is altered.

Note:

• The frequency of checks in the 'checkForChanges()' function can be adjusted to suit specific requirements.
• The 'bind()' and 'trigger()' methods are well-documented in the jQuery documentation for further reference.