ForgeComponents
en

Components

j-ViewBox

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20
  • keeps a fixed percentage height
  • great usage for intranet applications
  • supports releasing

Configuration:

  • height {Number} a percentage of height
  • disabled {Boolean} optional, can disable content with the layer
  • parent {String} optional, a container with fixed height, can be window. Default value: parent element.
  • minheight {Number} a minimal height in pixels (default: 0 - disabled)
  • scroll {Boolean} enables vertical scrolling (default: false - disabled)
  • scrollbar {Boolean/String} shows scrollbar (default: true or new: native)
  • delay {Number} msec. resizes the box again if the value is changed according to the path (default: 100)
  • visibleY {Boolean} still shows the Y scrollbar (default: false)
  • visibleX {Boolean} still shows the X scrollbar (default: false)
  • scrollto {String} scrolls to top/bottom automatically if the path is changed (default: EMPTY, can be top or bottom)
  • margin {Number} optional, a top/bottom margin together (supports auto which is counted from offset.top, default: 0)
  • marginxs {Number} optional, a top/bottom margin together for xs screen width
  • marginsm optional, a top/bottom margin together for sm screen width
  • marginmd optional, a top/bottom margin together for md screen width
  • marginlg optional, a top/bottom margin together for lg screen width
  • invisible {Boolean} if true then viewbox sets invisible class when is rendering (default: true)
  • scrollbarshadow {Boolean} if true then the custom scrollbars will contain vertical shadow (default: false)
  • initdelay {Number} removes the inivisible class after specified time (default: 250 ms)
  • centered {Boolean} enables vertical and horitonzal centering for the content (default: false)
  • resizedelay {Number} delay for resizing (default: 200)
  • NEW: togglescrolled {String} a DOM selector for the parent elements (it appends ui-viewbox-scrolled class when the viewbox is scrolled)

Methods:

  • component.scrolltop(val) scrolls Y
  • component.scrollbottom(val) scrolls Y from bottom side
  • component.resize() resizes the container (it reacts on resize events automatically)
  • component.resizescrollbar() resizes custom scrollbar (targeted for special cases)

Use it with <ui-component name="viewbox">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

example.html
<ui-component name="viewbox" config="height:30;parent:window" style="background-color:#F5F5F5">
	Always 30%
</ui-component>
<ui-component name="viewbox" config="height:70;parent:window" style="background-color:#E0E0E0">
	Always 70%
</ui-component>