How exactly to use ResizeSensor?

Question

My goal is run a javascript function every time the size of an expanding textarea element changes, and from other questions I found this: http://marcj.github.io/css-element-queries/

I downloaded it and put the css-element-queries folder on the server, and included it in the header:

<script src="css-element-queries/src/ResizeSensor.js"></script>
<script src="css-element-queries/src/ElementQueries.js"></script>

Then in a javascript file that I'm using below, I have

ResizeSensor(document.getElementById('the_id'), function(){
console.log("resized");
the_function();
});

But it doesn't do anything and gives an error:

Uncaught TypeError: Cannot read property 'length' of null at forEachElement (ResizeSensor.js:46) at ResizeSensor (ResizeSensor.js:201)

Answer 1

I'm not sure if ElementQueries are the correct solution for your issue.

Element Queries are used to apply specific CSS, if an element has reached a specific size.

E.g. the following is your HTML:

<div class="widget-name">
    <h2>Element responsiveness FTW!</h2>
</div>

and your define a CSS rule like that:

.widget-name h2 {
    font-size: 12px;
}

.widget-name[min-width~="400px"] h2 {
    font-size: 18px;
}

.widget-name[min-width~="600px"] h2 {
    padding: 55px;
    text-align: center;
    font-size: 24px;
}

.widget-name[min-width~="700px"] h2 {
    font-size: 34px;
    color: red;
}

Now Element Queries do the following: If the container widget-name has the size of 700px or less the rule .widget-name[min-width~="700px"] h2 is applied. if the size of the container widget-name is 600 or less the rule .widget-name[min-width~="600px"] h2 is applied.

I hope this answer explained it a little bit.