Menu
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.
382
In the mean time, you can use function like the following. Since, the majority of element size changes will come from the window resizing or from changing something in the DOM. You can listen to window resizing with the window's resize event and you can listen to DOM changes using MutationObserver .
Method 1: The height() method returns the first matched element's height, But the height(value) method sets all matched elements height. // Returns the height of the first matched element $(selector). height() // Set the height of the all matched elements $(selector). height(value);
jQuery innerHeight() Method The innerHeight() method returns the inner height of the FIRST matched element. As the image below illustrates, this method includes padding, but not border and margin. Related methods: width() - Sets or returns the width of an element. height() - Sets or returns the height of an element.
By default a div is a block element, it means its width will be 100% of its container width, and its height will expand to cover all of its children. In case its children has a larger width than the div 's container width, the div itself does not expand horizontally but its children spill outside its boundary instead.
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.
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:
Description: Attach a handler to an event for the elements. Description: Execute all handlers and behaviors attached to the matched elements for the given event type.
72
Please don't use techniques described in other answers here. They are either not working with css3 animations size changes, floating layout changes or changes that don't come from jQuery land. You can use a resize-detector, a event-based approach, that doesn't waste your CPU time.
https://github.com/marcj/css-element-queries
It contains a ResizeSensor class you can use for that purpose.
new ResizeSensor(jQuery('#mainContent'), function(){ console.log('main content dimension changed'); }); Disclaimer: I wrote this library
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
