Layer

Documentation updated on February 7th.

Description

The Layer widget is a member of Floats family. It gives rich information about an UI element on the screen.

Demo

Hold cursor over the ninja for a few miliseconds:

Code snippet

<p id="example">Move cursor over me!!</p>

As any Floats children, the Layer has a few uses cases you can use to modify and manipulate its content, its size and positioning.

Instance component

This is the way to create a new Layer:

var foo = $("#example").layer("<p>Rich content.</p>");

Configuration

Any widget can be configurated through parameters written in JSON. Here is an example:

var foo = $("#example").layer({
	"bar": foobar,
	"baz": quux
});

You can see the complete list of parameters in Layer API documentation.

Basics

Show and hide

All Floats exposes some public methods called show and hide, both allow you to manage the Layer behavior programmatically. Something like this:

foo.show(); // Shows the layer
foo.hide(); // Hides the layer

Read more about Floats.

Get and set content

All Floats exposes a public method called content, it works as a getter and a setter at the same time. To get the content of this component simply use the method without arguments, like this:

var content = foo.content(); // Get its content

To set content add an argument to the method content, admits static content, DOM content or AJAX content. See an example:

foo.content("New content!"); // Set its content

Read more about Content.

Changing size

For change the width property to the Layer container there is a method called width, also works as a getter and a setter at the same time. To get the property simply use the method without arguments, like this:

var width = foo.width(); // Get its width

To set the property add an argument to the method width, admits Numbers (33) or String  ("33px") as a CSS property. See an example:

foo.width(300); // Set its width

Exactly the same thing with the method heigth, admits Numbers (22) or String ("22px") as a CSS property. Get example:

foo.height(); // Get its height

Set height() examples:

foo.height(300); // Set its height

Read more about Sizing.

Positioning

Chico has an great utility to position things on screen, is called Positioner. All Floats has a position method related to the Positioner , you can use it to redefine Layer positioning. See an example:

foo.position({
	"offset": "0 10",
	"points": "lt lb"
});

As you can see, we pass a configuration object to the position method with some properties. The offset property let you define a specific pixel values for X and Y axis indentation.

The points  property defines the position relation between the element and its context.  In this case, the value "lt lb" literally says: The element will be positioned by joining its left-bottom point with its context by its left-top point.

Read more about Positioner.

Events

The main widget's actions trigger custom events, which you can suscribe to execute any action.

Here is an example of the ready event, triggered when component ends its load process:

foo.on("ready", function () {
	var that = this; // Where "this" is the returned object of component
});

You can see the complete list of events in Layer API documentation.

Learn more about events on our step-by-step guide.