layerJS Attributes

Thomas Handorf edited this page Sep 3, 2018 · 16 revisions

The behaviour of layerJS can be completely controlled by HTML attributes and links. This article gives you a full list of attributes.

layerJS elements are structured in nested stage-layer-frame hierarchies which look in its simplest from as follows:

<div lj-type="stage">
    <div lj-type="layer">
        <div lj-type="frame">
            … your HTML code …
        </div>
    </div>
</div>

Each of the 3 types of elements can be controlled by various HTML attributes. All layerJS attributes start with data-lj-(strictly HTML compliant) or lj-(short form).

Example:

<div lj-type="frame" lj-transition="fade">
  … your HTML code …
</div>

Alternatively the behaviour can be controlled by CSS custom attributes. Most attributes (except lj-name, lj-type) can also be defined in CSS. Attributes in CSS always start with --lj-.

#frameid {
  --lj-transition: left;
}

Note: CSS properties take precedence before HTML attributes.

List of attributes

The different attributes and their functions are defined below. Each attribute can be used in the data-lj- or lj-form in HTML or in the --lj- form in CSS. For simplicity the table below only shows the lj-form.

Attribute Stage Layer Frame
lj-type X X X
This property defines the type of the element within layerjs. Possible values are: stage, layer, frame.
lj-name X X X
The name can be used to identify an element for example in links. The name takes precedence to the element's id. If not given the elements id is taken or a generic name (e.g. frame[0]) is automatically chosen.
lj-fit-to X X
The dimensions of the frame doesn't always match the dimensions of it's stage. With this property you can specify which fitting strategy to use.
Possible values:
width (default), height, responsive-width, responsive-height, repsonsive, fixed, elastic-width, elastic-height, responsive-width, responsive-height, fixed.
When a frame doesn't have a fitting strategy defined, it will use the fitting strategy that is defined on the layer.
lj-start-position X X
Most fitting strategies (see lj-fit-to) will fit either the frames width or height into the stage. The other frame dimension will generally be too short or to long for the stage. This attribute controls how the frame is aligned to the stage borders initially. For example if you specify lj-fit-to="responsive-width" and lj-start-position="bottom" the frame will initially be scrolled down completely.
Possible values:
top, bottom, left, right, center, top-left, top-right, bottom-left, bottom-right. Default is top-left.
The combined values are good for the 'fixed' fitting strategy which has freedom in both dimensions.
Note: This will work regardless of scrolling being active or not. If scrolling is not active lj-start-position will determine the frame position for ever, in case of scrolling just the start position.
lj-no-scrolling X X
Disables scrolling even if it would occur if one of the frame dimension is larger than the stage. Boolean ("true"/"false"). Default is "false"
lj-transition X X
Specify the transition type. This is dependent on the layout (see next section).
For the slide layout:left, right, up, down, fade, blur, zoomin, zoomout, slideOverLeft, slideOverRight, slideOverUp, slideOverDown, none, default. Default is a left transition
For the canvas layout: default. Default is a motion that "zooms" to the position of the new active frame.
Note: If you specify the transition on the frame and two frames have different transitions, the old frame will move out with its own transition, while the new active frame will move in with its transition.
Note: You can also specify the transition in the link.
lj-layout X
Determines how frames are shown in a layer. Currently 2 layouts are supported:
slide (default): the slide layout will always show only one frame at a time (the active frame) which is fit into the stage according to the fitting mode. During a transition this frame is exchanged by the new active frame.
canvas: all frames have fixed positions on an infinite canvas. The active frame will be fit into the stage according to the fitting mode. Other frames will be visible if they overlap with the current frame. Transitions will "zoom" to the new active frame similar to the effect known from prezi.com
lj-default-frame X
This specifies the frame(name) that the layer should show initially.
lj-native-scroll X
When true (default), layerjs will use the native scrolling of the browser. This will have some implications. First, layerJS will insert helper div into the layer that will natively scroll in the layer div. Therefore, the layer itself will expand to the full stage. This shouldn't be used for layers on top as you can't click through.
When false, layerJS will move the frame using the transform CSS property. The layer itself will have a zero size which is ideal for layers on top of other content like menues of popups.
lj-neighbors.l X
Specifies the name of the frame left of the current frame. Used for swiping to the right on touchpad or touchscreens.
lj-neighbors.r X
Specifies the name of the frame right of the current frame. Used for swiping to the left on touchpad or touchscreens.
lj-neighbors.t X
Specifies the name of the frame on top of the current frame. Used for swiping to the down on touchpad or touchscreens.
lj-neighbors.b X
Specifies the name of the frame below of the current frame. Used for swiping to the up on touchpad or touchscreens.
lj-auto-width X
The width of the stage will be adapted to the width of the layer. This attributes contains the name of the layer whose width we need to adapt.
lj-auto-height X
The height of the stage will be adapted to the height of the layer. This attributes contains the name of the layer whose height we need to adapt.

Layout specific attributes

Canvas layout

Attribute Stage Layer Frame
lj-width X
Specifies the width of a view. This can also be done by CSS.
lj-height X
Specifies the height of a view. This can also be done by CSS.
lj-x X
Specifies the X coordinate of a view on the infinite canvas. This CANNOT be done by CSS.
lj-y X
Specifies the Y coordinate of a view on the infinite canvas. This CANNOT be done by CSS.
lj-scale-x X
Specifies how much the width of the frame should be scaled.
lj-scale-y X
Specifies how much the width of the frame should be scaled.
lj-rotation X
Defines how much the element should be rotated.

Fitting mode specific attributes

Attribute Stage Layer Frame
lj-elastic-left X
Elastic fitting frames have kind of margin areas which contain dispensable content. This specifies the left dispensable content.
lj-elastic-right X
Elastic fitting frames have kind of margin areas which contain dispensable content. This specifies the left dispensable content.
lj-elastic-top X
Elastic fitting frames have kind of margin areas which contain dispensable content. This specifies the top dispensable content.
lj-elastic-bottom X
Elastic fitting frames have kind of margin areas which contain dispensable content. This specifies the bottom dispensable content.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.