sectionizr
jQuery plugin for presenting UI in sections, one section at a time, each section being full width and full height, arranged horizontally or vertically. See example to appreciate its simplicity and beauty.
Sectionizr helps you present a rather bulky UI in a more friendly way, giving room for enough space for viewer comfort, and allowing them focus on what's important - overall, you can use sectionizr to break your UI into linked sections
Sectionizr by default arranges your
<section></section>'s horizontally, add 'vertical' class to a sectionizr to make it's sections stack vertically. Sections in a sectionizr have to really be<section></section>
Usage
Sectionizr depends on its sectionizr.css stylesheet to render the sections in such a way that they are compliant with the library's operations, so unless you've got an even cooler way to style them up (arrange them), ensure to include the file on your page
<link rel="stylesheet" href="path/to/sectionizr.css">Include the script (1KB, compressed) in your project (node compatible also). Note that jQuery must be present on the same page.
<script src="path/to/sectionizr[.min].js"></script>Once all dependencies are in place, you need to initialize sectionizr on corresponding elements in the DOM
let controlla = $('.sectionizr').sectionizr();Remember to keep a pointer to your sectionizr object - that's how you control the sectionized contents of your page.
If you have multiple (or nested) sectionizr's on the same page which share the same selector (e.g class name), Sectionizr will initialize them all and return an array, so you may store them like this
let [controlla1, controlla2] = $('.sectionizr').sectionizr();In the event that you need to fetch your sectionizr later on in the code (and you maybe forgot to initially keep a pointer to it as strongly advised above) you can retrieve the sectionizr object attached to the specifc DOM element it was initialized on. For example
<div class="sectionizr"> <section></section> <section></section> </div>// for some strange reason, you do not assign the returned sectionizr object $('.sectionizr').sectionizr(); // fret not, it's still there var lateControlla = $('.sectionizr')[0].sectionizr;Note that .sectionizr in the last example does not require parentheses, that's because it's not a function, it's merely the sectionizr object attached to its owner in the DOM.
Now that you have your controlla, you can begin to control the sectionized content. Available methods are shown in the table below:
| Method | Returns | Description |
|---|---|---|
| next | boolean | Call sectionizr.next() to advance to the next section. if false is returned, it means forward movement can be performed (in English, means you're at the last section already there's no next) |
| prev | boolean | Call sectionizr.prev() to reverse to the previous section. if false is returned, it means backwards movement can be performed (in English, means you're at the first section already there's no prev) |
| step | void | Call sectionizr.step(x) to advance or reverse by x steps. Negative values go x-steps backwards, for positive values, you already know how they work |
| go | void | Call sectionizr.go(x) to jump to section number x |
| first | void | Call sectionizr.first() to go directly to the first section |
| last | void | Call sectionizr.last() to go directly to the last section |
| hasNext | boolean | Call sectionizr.hasNext() to know if there's a section further away (if there's a next) |
| hasPrev | boolean | Call sectionizr.hasPrev() to know if there's a section behind the current one (if there's a prev) |
| refresh | void | Call sectionizr.refresh() to (as the name clearly states) refresh the sectionizr |
Other stuff, cos I'm tired of writing already
| Properties |
|---|
| sectionizr.el: returns the element this sectionizr is bound to in the DOM |
| sectionizr.sections: returns an array of the DOM nodes (sections) contained in this sectionizr |
| sectionizr.position: indicates what position (not zero-based) the section in view is at |
with love from @mofesolapaul
