Positioner

Documentation updated on November 12nd.

Description

Positioner is a utility that resolve positioning for all HTMLElements. The tool positions an element within a context.

Demo

Code snippet

<div class="context" id="context1">Context</div>
<div class="target" id="target1">Element</div>

Instance component

To use Positioner, you need three things:

• The element to be positioned.
• The context in which you want to position it.
• How those relate.

This is the way to position a new element:

var foo = ch.Positioner(CONFIGURATION_OBJECT);

Configuration object

The configuration object has the following basic structure:

 
{
	"element": String (query selector) or jQuery Object,
	"context": String (query selector) or jQuery Object,
	"points": String
}

The element and context can be especified as CSS query selector, like ".example" or a jQuery object like $(".example").

We make it easy!

Positioner uses the sides and center of the elements to positions some element. You have to indicate what side of target element has to match with the side of the context. For example, if you want to align some element to the left, you have to indicate that the target must match the "left top" point to the "left top" point of the context.

To make it more simple, the tool uses letters for the sides of the box.

Those are the letters related the sides:

• t: top
• r: right
• b: bottom
• l: left
• c: center (horizontally)
• m: middle (vertically centered)

By default, the context is the viewport and the target will be centered in this.

Points

Points is a string property. It has 2 pair of letters "points": "lt lt". The first pair is related with the target object and the second pair is related with the context object. It means what in where.

 
{"points": "TARGET CONTEXT"}

The first letter of the pair references to the horizontal axis, the options could be: l (left), c (center) or r (right). The second letter of the pair references to the vertical axis, it could be t (top), m (middle) or b (bottom).

 
{"points": "cm cm"}

Periodic table of the positioning

Intelligence

The intelligence of the positioner resolves conflicts when the target element doesn't have space in the browser window to be placed. With a simple configuration parameter, the Positioner will try to place the component to be visible as posible:

"reposition": Boolean

Offset

You can move the target from the context with the offset property. The value of the property must be a string with that indicate the X axis and Y axis. Those must be separated by a space. For example "10 0".