Docking the Sideview Player to a Destination Element

The Sideview Player can be docked to any element in your web page by specifying the element’s ID in the destinationElementId field.

In the following example, the Sideview Player has been docked to a side_rail element that is located on the right side of our web page.

Note: The location of the destination element can be anywhere on your page (left, right, top, bottom, centered etc.)

 

Enabled Options

When a destination element is specified, the following options are enabled:

  • useDestinationElementWidth - This will instruct the Sideview Player to inherit its width according to the destination element’s width.

Ignored Options

When a destination element is specified, the following options are disabled:

  • hAlignPoistion - As the selected destination element defines the Sideview Player’s horizontal alignment, this field is ignored, meaning that you cannot specify a margin position from either the left or right sides of the destination element.

 

 

Destination Element Docking Examples

Example 1 - Most Common Use

In the following example we have defined the following:

  • destinationElementId - side_rail: we have specified a side_rail element ID.
  • useDestinationElementWidth - True: This field is set to True so the Sideview Player inherits its width from the destination element.
  • hAlign - Right: This field is set to Right, meaning the Sideview Player will dock to to the Right border of the destination element.
  • vAlign - Top: This field is set to Top, meaning the Sideview Player will dock to the top border of the viewport (as the player must stay in view, vertical alignment is always relative to the viewport even when a destination element is specified).
  • vAlignPosition - 20: This field is set to a position of 20px from the top.

The result is the following:

 

 

 

 

Example 2

In the following example we have defined the following:

  • destinationElementId - side_rail: we have specified a side_rail element ID.
  • useDestinationElementWidth -False: This field is set to False so we may define a custom width.
  • width - 400: This field is set to a width of  400px, which is larger than the destination element’s width.
  • hAlign - Right: This field is set to Right, meaning the Sideview Player will dock to to the Right border of the destination element.
  • vAlign - Top: This field is set to Top, meaning the Sideview Player will dock to the top border of the viewport (as the player must stay in view, vertical alignment is always relative to the viewport even when a destination element is specified).
  • vAlignPosition - 20: This field is set to a position of 20px from the top.

The result is the following:

 

 

 

Example 3

In the following example we have defined the following:

  • destinationElementId - side_rail: we have specified a side_rail element ID.
  • useDestinationElementWidth -False: This field is set to False so we may define a custom width.
  • width - 200: This field is set to a width of 200px, which is smaller than the destination element’s width.
  • hAlign - Left: This field is set to Left, meaning the Sideview Player will dock to the Left border of the destination element.
  • vAlign - Top: This field is set to Top, meaning the Sideview Player will dock to the top border of the viewport (as the player must stay in view, vertical alignment is always relative to the viewport even when a destination element is specified).
  • vAlignPosition - 20: This field is set to a position of 20px from the top.

The result is the following:

 

 

Have more questions? Submit a request