Detecting When a Div's Height Changes Using Jquery

jquery - How to determine if a div changes its height or any css attribute?

First, There is no such css-changes event out of the box, but you can create one by your own, as onchange is for :input elements only. not for css changes.

There are two ways to track css changes.

1. Examine the DOM element for css changes every x time(500 milliseconds in the example).
2. Trigger an event when you change the element css.
3. Use the DOMAttrModified mutation event. But it's deprecated, so I'll skip on it.

First way:

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

    setTimeout(checkForChanges, 500);
}

Second way:

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

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

If you control the css changes, the second option is a lot more elegant and efficient way of doing it.

Documentations:

• bind: Description: Attach a handler to an event for the elements.
• trigger: Description: Execute all handlers and behaviors attached to the matched elements for the given event type.

Detect height change of a DIV with jQuery using Resize Plugin

Use a variable to keep track of the height:

var previousHeight = jQuery("#myDiv").height();

$("#myDiv").resize(function(e){ 
    // do something when element resizes 
    if(previousHeight < jQuery(this).height()){
        alert("now I'm bigger");
    }else{
        alert("Now I'm smaller");
    }
    //update previousHeight for next use
    previousHeight = jQuery(this).height();
});

How to detect and change div height in jQuery

The basic resize event can only be bound to $(window), you need to use a plugin if you want to be able to bind the resize event to a div:

http://benalman.com/projects/jquery-resize-plugin/

How to detect DIV's dimension changed?

There is a very efficient method to determine if a element's size has been changed.

http://marcj.github.io/css-element-queries/

This library has a class ResizeSensor which can be used for resize detection.
It uses an event-based approach, so it's damn fast and doesn't waste CPU time.

Example:

new ResizeSensor(jQuery('#divId'), function(){ 
    console.log('content dimension changed');
});

Please do not use the jQuery onresize plugin as it uses setTimeout() in combination with reading the DOM clientHeight/clientWidth properties in a loop to check for changes.
This is incredible slow and inaccurate since it causes layout thrashing.

Disclosure: I am directly associated with this library.

How to detect and change div height in jQuery

The basic resize event can only be bound to $(window), you need to use a plugin if you want to be able to bind the resize event to a div:

http://benalman.com/projects/jquery-resize-plugin/

---

Related Topics