News • Examples • Documentation • Download • Buy • Forum • Contact

Documentation

Plugins

XML Extensions

Tools


Third Party Software
for krpano

NOTE: This page is from an older version, see the latest version here.

ScrollArea Plugin scrollarea.swf / scrollarea.js Version 1.17

  • A scroll-able area - automatically scroll children layer/plugin elements withhin a (maskchildren=true) parent layer/plugin element.
  • The scrollarea plugin need to have a defined size and aligment and can be used only as children element inside an other layer/plugin element. Withhin this parent layer/plugin element, it is possible to scroll the scrollarea plugin by dragging the children elements of it.
  • The scroll dragging, friction and bounding is designed to behave like in native iOS scrolling elements by default.

Topics

Syntax

<layer name="scrollarea"
       url="scrollarea.swf" alturl="scrollarea.js"
       parent="..."
       align="..." width="..." height="..."
       direction="all"
       draggable="true"
       mwheel="true"
       onhover_autoscrolling="false"
       overscroll="1.0"
       friction="0.95"
       acceleration="0.08"
       returnacceleration="0.15"
       momentum="0.06"
       onscroll=""
       />

Plugin Attributes

Attribute nameTypeDefault value
directionString"all"
  • Set the allowed scrolling directions.
  • Possible settings:
    • all = allow scrolling in all directions
    • h = only horizontal scrolling
    • v = only vertical scrolling.
Attribute nameTypeDefault value
draggableBooleantrue
  • Should the scroll-area be draggable / allow dragging control.
Attribute nameTypeDefault value
mwheelBooleantrue
  • Mouse-Wheel support / scroll by using the Mouse-Wheel.
Attribute nameTypeDefault value
onhover_autoscrollingBooleanfalse
  • Automatic scrolling when the mouse hovers the area.
  • The scrolling will be proportionally relative to the mouse position.
  • This setting has no effect on touch usage.
Attribute nameTypeDefault value
overscroll
friction
acceleration
returnacceleration
momentum
Number
Number
Number
Number
Number		1.00
0.95
0.08
0.15
0.06
  • Settings for customizing / fine-tuning the movement behavior.
  • overscroll - The amount of overscrolling (0.0 = no overscroll, 1.0 = full overscroll).
  • friction - The movement friction.
  • acceleration - The movement acceleration.
  • returnacceleration - The returning (from overscrolled) acceleration.
  • momentum - The momentum acceleration.
Attribute nameTypeDefault value
loverflow (read only)
roverflow (read only)
toverflow (read only)
boverflow (read only)
woverflow (read only)
hoverflow (read only)
Number
Number
Number
Number
Number
Number
  • loverflow = left overflow
    roverflow = right overflow
    toverflow = top overflow
    boverflow = bottom overflow
  • woverflow = total width overflow
    hoverflow = total height overflow
  • The number of pixels that are currenlty outside the viewing area.
  • Positive values indicate outside and negative values inside.

Plugin Events

Attribute nameTypeDefault value
onscrollString
  • This event will be called when the scroll-area has been scrolled.

Plugin Actions

Action name
setcenter(x,y)
  • Center the plugin at the given children x/y position.
Action name
scrolltocenter(x,y)
  • Scroll the plugin to center itself at the given children x/y position.
Action name
scrollby(dx,dy)
  • Applies/adds the given delta x/y values to the scrolling velocity vector.
Action name
stopscrolling()
  • Stop all current scrollings.

Examples

Scrolling Thumbnails (xml:scrollingthumbnails.xml)
CLICK TO VIEW THE EXAMPLE
(with html5=auto)
CLICK TO VIEW THE EXAMPLE
(with html5=prefer)

Scrolling Thumbnails with Scroll-Buttons (xml:scrollingthumbnails2.xml)
CLICK TO VIEW THE EXAMPLE
(with html5=auto)
CLICK TO VIEW THE EXAMPLE
(with html5=prefer)

Scrolling Map (xml:scrollingmap.xml)
CLICK TO VIEW THE EXAMPLE
(with html5=auto)
CLICK TO VIEW THE EXAMPLE
(with html5=prefer)

Examples Notes:
  • In these examples only preview panos were used, that means that 'blurred' panos are normal in this case.
  • Both examples are also included in the viewer download package.