| .. | ||
| config.json | ||
| moveElems.js | ||
| README.md | ||
| name | tags | description |
|---|---|---|
| Move Elems | stable, feedback-wanted | Moves elements within the DOM structure during rendering. |
Move Elems (paged.js)
This plugin moves elements within the DOM structure during rendering. Usefull with other script like Full page or Float page.
This plugin moves elements relative to their sibling elements in the DOM — either forward or backward — based on the integer value you provide.
You need to use csstree.js in order to transform custom properties. If you use CSS Page Weaver is inclued by default
How to install
With CSS Page Weaver
Register the moveElems plugin in your manifest.json:
[
"moveElems",
// other plugins
]
⚠️ It’s recommended to load this plugin first to prevent any conflicts with other plugins.
Without CSS Page Weaver
Include both csstree and the fullPage script in your HTML <head>:
<script src="js/csstree.min.js"></script>
<script type="module" src="path/to/fullPage/floatPage.js"></script>
Don’t forget to update the path to the paged.esm.js module in the import statement before using the script.
import { Handler } from '/path/to/paged.esm.js'
How to use it
In your CSS, add the following custom property to the elements you want to move, using an ID or class:
elem{
--x-move-elem: 2;
}
In this example, the element will be moved after its second next sibling. You can also use negative values to move elements backward, e.g.:
elem{
--x-move-elem: -3;
}
This would move the element before its third previous sibling.
Credits
MIT licence, Julie Blanc, 2025