Jquery - How to Determine If a Div Changes Its Height or Any CSS Attribute

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.

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/

jQuery set height of a div to the 'dynamic height' of another

this works fine for me, its just that your class names are wrong, the class-names should be .col-1 and .col-2:

$(document).ready(function() {
    var divHeight = $('.col-1').height(); 
    $('.col-2').css('min-height', divHeight+'px');
});  

Here is the Fiddle

EDIT- Based on comments:

You can do all this without using jquery

1. Flexbox (not supported in IE 8 & 9) - if you apply the flex to the parent div, it will make all its children heights equal:

    .row{ display: flex;}  
   

2. table - you can give your div's the table layout

   .row {display: table; }
   
   .row div { display: table-cell;}
   

div .height() changes after resize without telling it to

First of all, do you absolutely need to use jQuery/JavaScript to achieve vertical center? It can easily be achieved via CSS by using the top: 50%; margin-top:-100px approach, where "100" would be half the height of your content. Demo: http://jsfiddle.net/lasha/dGcsB/

If you'd like to use jQuery, you can apply similar CSS dynamically, like what you tried to achieve with your code. Demo: http://jsfiddle.net/lasha/dGcsB/1/

As an added bonus, you can apply a similar technique to center an element within a parent container whose height dynamically changes: http://jsfiddle.net/lasha/dGcsB/2/

Enjoy the code samples. :)

EDIT: Oh, and to briefly explain what causes the height stuff to happen, is that in Chrome, for example, the 'ready' event is fired before the DOM has finished calculating the final dimensions of each element, so when you try to get the height or width of an element right on load, the browser may not have the most up to take info. This, as of this moment, is more of a Chrome thing, and Firefox doesn't usually have this issue.

---

Related Topics