Skip to content

Frame Fitting

Jump to bottom
Thomas Handorf edited this page Apr 22, 2018 · 4 revisions

Frames are the principal containers of web content in layerJS. They are <div>s with custom data attributes which control their behavior.

<div lj-type="frame" id="frame1" lj-fit-to="width" lj-start-position="top"
lj-neighbors.b="frame2">
  ...
</div>

Fitting

Frames are fit into stages. The fitting is determined by the parameter

lj-fit-to Because the dimensions of the frame doesn't always match the dimensions of the stage, we can specify which fitting strategy will be used to adapt the frame to it's stage. When a frame doesn't have a fitting strategy defined, it will use the fitting strategy of the layer.
It's default value is "width".

Scaling: lj-fit-to="width" / lj-fit-to="height"

The frame is scaled such that the frame width fits the stage width, for "width" or the frame height fits the stage height for "height". The other frame dimension is scaled accordingly and hence can be smaller or larger than the corresponding dimension of the stage. If longer, this leads to a scrollable frame in that direction.

<div lj-type="frame" lj-name="frame1" lj-fit-to="width"/>

<div lj-type="frame" lj-name="frame2" lj-fit-to="height"/>

Responsive: lj-fit-to="responsive-*"

The frame will get the same width/height as the stage and no scaling will happen.

"responsive-width" value will give the frame width the same as the stage width. The height will be defined elsewhere and may lead to scrolling. "responsive-height" value will give the frame the same as the stage height. "responsive" value will give the frame the same width and height as the stage.

<div lj-type="frame" id="frame1" lj-fit-to="responsive-width"/>

<div lj-type="frame" id="frame2" lj-fit-to="responsive-height"/>

<div lj-type="frame" id="frame3" lj-fit-to="responsive"/>

Fixed: lj-fit-to="responsive-width"

"fixed" means that width and height are fixed (e.g. defined by the content of the frame or by CSS) and scrolling will happen in both x and y direction if the stage is smaller than the frame in one dimension.

<div lj-type="frame" lj-name="frame1" lj-fit-to="fixed"/>

Elastic lj-fit-to="elastic-*"

Elastic fitting frames have kind of margin areas which contain dispensable content. The fitting function will try to keep the scale at 1 if that can be done by placing the border inside the margin areas. If the border would be inside the relevant area, the frame would be scaled to fit the inner margin border into the stage. if the border would be outside, the frame is scaled to fit the outer margin border into the stage. This is done for the width or the height for "elatic-width" or "elastic-height", respectively.

<div lj-type="frame" lj-name="frame1" lj-fit-to="elastic-width"/>

<div lj-type="frame" lj-name="frame2" lj-fit-to="elastic-height"/>

The frame properties "lj-elastic_left", "lj-elastic_right", "lj-elastic_top", "lj-elastic_bottom" specify the margins and can be all different or even be 0. if the counterparts (e.g. left & right) are different and the fitting works in the non-scaling range, the borders are placed at the same percentage for both margins (e.g. 40% of the left margin & 40% of the right margin).

elastic

With elastic-left=0 and elastic-right=50 this essentially works like a regular div with min-width="width"-50px and max-width="width" but with scaling when it hits the max/min.

Scrolling and start position

If after fitting one of the frame dimensions is larger than the corresponding stage dimension, scrolling will happen. The initial scroll position is determined by:

lj-start-position

Possible values:

  • "top": align top border of frame with top border of stage (also if frame height is smaller than stage height); applies to width fitting
  • "bottom": align bottom borders (analogous to above)
  • "middle": center vertically (for frame heights smaller or larger than stage heights)
  • "left": align left border of frame with left border of stage (otherwise as above); applies to height fitting
  • "right": analogous to above
  • "center": center horizontally
  • "top-left": combinatory value for both dimensions together
  • "top-right": ''
  • "bottom-right": ''
  • "bottom-right": ''
  • "middle-center": you can just use 'center'

not implemented yet:

  • "xx%": position at xx% of frame height/width, depending on width/height fitting correspondingly 50% is the same as middle/center
  • "xx": position at xx pixels from top/left depending on width/height fitting correspondingly.
<div lj-type="frame" id="frame1" lj-start-position="center"/>
Clone this wiki locally