form5-alignment

form5-alignment is a collection of alignment helper functions dependent on jQuery. Only 3KB of minified Javascript.

Demo

How to fetch form5-alignment?

Install with Bower: bower install form5-alignment

Clone the Github project: git clone https://github.com/Form5/form5-alignment.git

Or download zip.

Then what?

Please note that this is a very rough documentation, so until we complete it we encourage you to check out the source code and the demo.

Getting started

After installation simply load the file along with other scripts, no further initialization is necessary. Remember that this script requires jQuery, meaning jQuery should already be loaded before this script. We recommend using the latest stable release.

<script src="path/to/jquery.js"></script>
<script src="path/to/form5-alignment.min.js"></script>

Attach the appropriate attribute to an element the function should be applied to, like so e.g.

<div vertical-center>...</div>

All options (as of v1.1) only take integers as a value, and are of course optional. Desired options should be included within the attribute as JSON, like so e.g.

<div vertical-center="{above: 568, below: 1023}">...</div>

above and below` reference the window's width, meaning it should work above and/or below a width predefined by yourself. (try out the demo)

Available functions

---

[full-window-height]

<div full-window-height>...</div>

Will set the min-height (or optionally height, if force option is used) of the element to window.height(). The value can be proportionally modified by the multiply option, e.g. multiply: 0.5 will return half of the window.height().

Available options: {above: integer, below: integer, multiply: integer, force: boolean}

---

Equalize

This function will go through all [equalize] elements within [equalize-wrap], find the largest one, and set it as a fixed height on all of the elements in this group.

[equalize-wrap]

<div equalize-wrap>...</div>

Available options: {above: integer, below: integer}

Should be applied to, well, the wrap element. This is required to allow multiple sets of 'equalized' elements on same page.

[equalize]

<div equalize>...</div>

Should be applied to all elements, within the previously mentioned equalize-wrap, this function should affect.

---

[vertical-center]

<div vertical-center>...</div>

Will center the element vertically within it's parent.

Available options: {above: integer, below: integer, fixed: boolean}

---

[square]

<div square>...</div>

Will set the height equal to elements width. The value can be proportionally modified by the multiply option, e.g. multiply: 0.5 will return half of the element.height(). One can add or subtract from the value by using 'subtract:123' and 'add:123' accordingly.

Available options: {above: integer, below: integer, multiply: integer, subtract: integer, add: integer}

---

What about debugging?

For debugging you can run this after the functions have been included.

window.form5.alignment.debug = true;

This will return each element affected by these functions and all options related to each one.

Want more?

You could go all in and customize the script directly. The original can be found in src/form5-alignment.js. To compile a minified/uglified version of your new script you can build it again by running:

$ npm install
$ grunt build

If you would like to extend the core functionality of this script in a way that could benefit others, don't hesitate to create a pull request!

Author

Written by Form5.

Contributors

Benedikt D Valdez, developer at Form5.

Olafur Nielsen, co-founder at Form5.

Arni Reynir Oskarsson, developer at Form5.