DOM Observers

Check Display event on visibility change.

Sometimes components, like Grid or Tab are hidden in the markup. This may happen when used in combination with the Switcher, Modal or Dropdown. Once they become visible, they need to be recalculated to adjust or fix the height and other dimensions.

To do so, add the data-check-display attribute to the elements which need to be recalculated. They now listen to the display.clique.check event, which will be triggered by the container component, for example the Switcher.

Note This is not needed for elements with data-margin, data-row-margin and data-row-match attributes – those will be triggered by default.


Check if an element is visible

HTML Markup

To listen for a change in an elements visibility, add the data-check-display attribute to the element and, in your JavaScript, bind an event listener to the object watching for the display.clique.check event to be triggered.

This is especially useful when used in conjunction with the modal component to observe whether or not the modal is visible.

<!-- Element within a modal, switcher or dropdown -->
<div id="my-element" data-check-display>...</div>

JS Markup

$("#my-element").on('display.clique.check', function() {
	// Element visibility has changed
    // Execute callback function
});

Watch for changes

If you'd like to listen for content/HTML changes to an element, simply apply the data-observe attribute to an element and bind an event listener to the DOM object, watching for the changed.clique.dom event to be triggered.

HTML Markup

<div id="my-element" data-observe>...</div>

JS Markup

$("#my-element").on('changed.clique.dom', function() {
	// Content or HTML of this element has changed
    // Execute callback function
});