Position something on screen

Documentation updated on November 12nd.

Behind the magic

To perform this task we need to use the Positioner component. The role of this component is to position any element relative to any context.

Positioning, step by step

Step 1: Set the HTML and CSS structure

On this example we’ll position a red div element relative to other blue div element which we’ll call context.

The code snippet that we use is as follow:

<div class="context"></div>
<div class="element"></div>

 And we’re going to shape this with some CSS styles:

.context {
	width: 100px;
	height: 100px;
	border: 1px solid blue;
}
 
.element {
	width: 25px;
	height: 25px;
	background-color: red;
}

Step 2: Create a configuration object

First, we’ll create an object that will contain the properties that the component needs to do the magic.

var configuration = {};

Each position that we want to create, can receive some parameters. Then we have to specify all required parameters, such as element. So, we’ll assign the red element (as a query string of the CSS selector) to the element parameter.

configuration.element = ".element";

Then, we’ll specify the context from which the red element will take reference to positionate itself.

configuration.context = ".context";

Finally, we must specify which position will be the connector between context and element. This is specified through the points parameter. In this example, we need to position the red element’s left-top corner relative to the context’s (blue element) right-top corner.

configuration.points = "lt rt";

Step 3: Instance the Positioner component

Once we create the configuration object, we invoke the Positioner component.

var example = ch.Positioner(configuration);

The simplest way to do the same is specifying the configuration object in JSON format at same time as the component is invoked.

var example = ch.Positioner({
	element: ".element",
	context: ".context",
	points: "lt rt"
});

Step 4: Understanding the control object returned by component

After the component is instantiated and the element is positioned on screen, it returns a public method that allows to control the position. This method is called position and can be used for 3 purposes:

• Get the current position configuration as JSON.
• Update the element and context position, and redraw.
• Set a new position by resetting the specified parameters of configuration object.

Relocating

To change points of the current position, we can use the public method position, specifying a new configuration object that contains a new points reference.

example({
	"points": "lt lb"
});

Final result should be seen like this: