regionfragmentchange

Summary

Fires on the NamedFlow object when there is a change in how content flows through a region chain.

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 there is 'any' change in how content flows through a [region chain](/css/concepts/region_chain), even minor changes that don't affect the total number of [regions](/css/concepts/region) the content requires.

Examples

This simple example logs each time content reflows among regions, and works with the CSS and JavaScript that follow. Define layout and content elements:

<html>
<body>
<section class="page">
    <div> <h1>Region #1</h1> </div>
    <div> <h1>Region #2</h1> </div>
    <aside></aside>
</section>
<article>
<h1>Sample CSS Regions Layout</h1>
<p>Riverrun, past Eve and Adam's, from swerve of shore to bend of bay, brings us by a commodius vicus of recirculation back to Howth Castle and Environs.</p>
<p>...</p>
</article>
</body>
</html>

View live example

Flow the content into the layout:

body { background: #aaa; }
article { flow-into: main; }

div {
    flow-from: main;
    region-fragment: break;
    top: 5%;
    width: 40%;
    height: 75%;
}

div, aside {
    position: absolute;
    background: #fff;
    padding: 1em;
    border-radius: 1em;
}

aside {
    min-width: 40%;
    left: 5%;
    top: 90%;
}

div:first-of-type { left: 5%; }
div:last-of-type { left: 55%; }

View live example

Log to console any shifts of content from one region to another that result when resizing the window, and thus the layout elements.

document.getNamedFlows().namedItem('main').addEventListener(
    'regionfragmentchange',
    function() { console.log(inc++); }
);

View live example

Notes

The event fires when content shifts ‘in any way’ within the region chain, such as when linebreaks change. That is, when any region’s collection of DOM Range fragments changes their dimensions or offsets. (Compare with the regionoversetchange event, which fires much less frequently in response to changing content or dimensions.)

Related specifications

CSS Regions Module Level 1: W3C Working Draft

regionfragmentchange

Summary

Overview Table

Examples

Notes

Related specifications

See also

Related articles

Regions

External resources