This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

regionoversetchange

Summary

Fires on the NamedFlow object when a change in how its content flows through a region chain renders any region empty or overset (overfilled), or that reverses that state.

Overview Table

Synchronous No
Bubbles No
Target [**NamedFlow**](/apis/css-regions/NamedFlow)
Cancelable Yes
Default action none
Fires on the [**NamedFlow**](/apis/css-regions/NamedFlow) object when the tail end of content moves from one region to another within a [chain](/css/concepts/region_chain), changing any between a properly filled state and one that is empty or [*overset*](/css/concepts/overset).

Examples

dispatch functions to add or delete regions based on changes to how content flows through a region chain:

document.getNamedFlows().namedItem('main').addEventListener(
    'regionoversetchange', modifyFlow
);

function modifyFlow(e) {
    var flow = e.target;
    if (flow.overset) {
        appendRegion(flow.name); // custom function
    }
    else if (flow.firstEmptyRegionIndex !== -1) {
        trimRegions(flow.name); // custom function
    }
}

Notes

The event fires when the regionOverset changes (between fit, overset, and empty) for any region within a region chain. (Compare with the regionfragmentchange event, which fires much more frequently in response to changing content or dimensions.)

Related specifications

CSS Regions Module Level 1
W3C Working Draft

See also

Related articles

Regions

External resources