News Examples Documentation Download Buy Forum Contact

ScrollArea Plugin scrollarea.swf / scrollarea.js Version 1.16

  • A scrolling area - automatically scroll children layer/plugin elements withhin the 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. And 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.

Syntax

<layer name="scrollarea"
       url="scrollarea.swf" alturl="scrollarea.js"
       parent="..."
       align="..." width="..." height="..."
       direction="all"
       draggable="true"
       onhover_autoscrolling="false"
       onscroll=""
       />

Plugin Attributes

  • direction
    • Set the allowed scrolling directions.
    • Possible settings:
      • all = allow scrolling in all directions
      • h = only horizontal scrolling
      • v = only vertical scrolling.
  • draggable
    • Should the scroll-area be draggable / allow dragging control.
    • Possible settings:
      • true = enabled (default)
      • false = disabled
  • onhover_autoscrolling
    • 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.
    • Possible settings:
      • true = enabled
      • false = disabled (default)
  • woverflow and hoverflow (read only)
    • woverflow = width overflow
      hoverflow = height overflow
    • The total number of pixels that are currenlty outside the viewing area.
    • Positive values indicate outside and negative values inside.
  • loverflow, roverflow, toverflow and boverflow (read only)
    • loverflow = left overflow
      roverflow = right overflow
      toverflow = top overflow
      boverflow = bottom overflow
    • The number of pixels that are currenlty outside the viewing area.
    • Positive values indicate outside and negative values inside.

Plugin Actions

Plugin Events

  • onscroll
    • The event will be called when the scroll-area has scrolled.

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.