regionfragmentchange

Jump to: navigation, search

regionfragmentchange

This article is Ready to Use.


W3C Working Draft

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
Cancelable Yes
Default action none

Fires on the NamedFlow object when there is 'any' change in how content flows through a region chain, even minor changes that don't affect the total number of regions the content requires.

Examples

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

HTML

<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 exampleFlow the content into the layout:

CSS

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 exampleLog to console any shifts of content from one region to another that result when resizing the window, and thus the layout elements.

JavaScript

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

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

Specification Status Related Changes
CSS Regions Module Level 1 W3C Working Draft

See also

Related articles

Regions










  • regionfragmentchange






















External resources