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.

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

See also

Related articles

Regions

External resources