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


Tags: javascript,jquery,css

Problem :

I wanna know how to trigger an event when a div changes its height or any css attribute.

I have a div with id = mainContent. I want jquery to automatically trigger an event when it changes its height. I did something like this:

$("#mainContent").change('height', function() {
  $("#separator").css('height', $("#mainContent").height());
});

I know its wrong.

Here's my whole code (I pasted all of it because I can't get into jsfiddle for some reason I don't know):

<html>
<head>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}

#separator {
 border-right: 1px solid black;
}
</style>

<script type="text/javascript" src="jquery1.6.4min.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
 $("#separator").css('height', $("body").height());
});

$(function() {
 $("#btnSample1").click(function() {
  $("#mainContent").css('height', '400px');
  $("#mainContent").css('width', '600px');
  $("#mainContent").css('background-color', '#F0F0F0');
 });

 $("#btnSample2").click(function() {
  $("#mainContent").css('height', '1600px');
  $("#mainContent").css('width', '700px');
  $("#mainContent").css('background-color', '#F0F0F0');     
 });

 $("#mainContent").change('height', function() {
  $("#separator").css('height', $("#mainContent").height());
 });
});
</script>
</head>
<body>
<table style="width: 100%;">
 <tr>
  <td valign="top" style="width: 19%;"> 
   <table id="mainMenu">
    <tr><td><input id="btnSample1" type="button" value="Sample 1"  /></td></tr>
    <tr><td><input id="btnSample2" type="button" value="Sample 2"  /></td></tr>
   </table>
  </td>

  <td valign="top" style="width: 1%;" >
   <div id="separator"></div> 
  </td>

  <td valign="top" style="width: 80%;">
   <div id="mainContent"></div>
  </td>
 </tr>
</table>
</body>
</html>

I am trying to adjust the height of the div id=separator based on the height of mainContent whenever the height of mainContent changes.

PS: In this case I know I can use the button event to do this but I want the div to trigger the event when the height is changed. Please help. Thanks in advance.



Solution :

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.

    CSS Howto..

    CSS: how to make margin: 0px auto work

    How do I make two divs in the same “row” float in different directions?

    How to make images inside a box responsive CSS

    How to make DIVs flow to the left in a x-scrollable pane with CSS?

    how to add more specificity to css class .background-color-blue so it overrides default div's background color

    How to cover piece of border with element over it?

    How to do isometric 3D in CSS

    How to let DOM elements stack and overflow horizontally instead of vertically in HTML?

    How to display a header inline with paragraph text using divs or an alternative method

    How to get 2 fixed and 1 dynamic column in CSS

    How to create a function in which a box moves in accordance with 2 user inputs (direction and # of pixels to move)

    css: how to vertically align table within div

    How to auto adjust wrapper height when padding is applied to inner elements

    How to remove css and javascript code in source code of website

    How can I use css properties with different classes?

    How are URLs handled inside the CSS file in CakePHP so they reference the correct location?

    How to make bootstrap 3 dropdown menu working for no JS user

    How to prevent HTML code in a literal inside a DIV from affecting outer page styles

    How can I enable/disable(in real time) javascript plugins on a webpage?

    What shape is this, and how can i achieve it using css?

    How to make bootstrap row “col-md-4” fullscreen size

    how to add css classes to a component in react?

    how to overlap two div in css?

    How to override Liferay core' css?

    How to align a background image to bottom of table cells in css?

    How to modify a general css using javascript and jquery and return the result as a new id

    How to repeat an image but only horizontally?

    How to adjust the size of the input component?

    How can I dock the button to jQueryUI dialog bottom as the dialog inner content increases?

    How can I use CSS to position an image on the rightmost side?