Which way should I choose to observe layout changes on a website?
I use the jQuery EqualHeight plugin on two content boxes, with a border-right on the first box to divide them.
If the height of the right box is taller, then the border doesn’t fit, that’s the reason why I use EqualHeight jQuery.
so far so good…
If the size of the right box changes, maybe because of an accordion or show/height effect, the height of the leftbox and so the border/divider stays the same.
So what is the simpliest way to observe layout changes, without recalling the equal height function on explicit actions (like show/hide toggles)?
Should I use a timer to check regulary on layout changes and execute the function or does this decrease performance?
As a side-note I could use a table or display:table to mimic the table behaviour, but this is a bit poor. I tried out Flexbox CSS rules and it’s awesome(ly experimental/unsupported).
So as simple fallback I like to set equal height via JS
The easiest way is to know when these layout changes take place. This is not at some random time, there is always a way to say: “Hey, now it is changed”.
The easiest way is to use jQuery functions that change the layout and use an event structure. For example, send a custom event when a change happens. The other elements can now adjust to that.
The nice thing about jQuery is that almost every function has a callback. use the callback when some animation is done to send your custom event to other elements so they can adjust their height.