Documentation Dynamic Media Viewers Reference Guide

Table of contents table-of-contents

Last update: Fri Dec 10 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

Developer
User

Table of contents is a button in the main control bar. When activated, a drop-down panel appears with a list of page indexes and labels.

Based on the configuration, the list can contain all pages that are present in the catalog or only those pages that have explicit labels defined. On desktop systems, if the list is longer than the available screen real estate, a scroll bar is displayed on the right.

The position and size of the table of contents button in the viewer user interface is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7tableofcontents

CSS properties of the table of contents

margin-top

The offset from the top of the control bar.

margin-left

The distance to the next button on the left, or the left side of the control bar if this button is the first in a row.

width

The width of the table of contents button.

height

The height of the table of contents button.

background-image

The image that is displayed for a given button state.

background-position

Position inside artwork sprite, if CSS sprites are used.

See also CSS Sprites.

NOTE

This button supports the state attribute selector, which can be used to apply different skins to different button states.

The button tool tip can be localized. See Localization of user interface elements for more information.

Example - Set up a table of contents button that is positioned 4 pixels from the bottom and 43 pixels from the left of the main control bar. Size is 28 x 28 pixels and a different image is displayed for each of the four different button states:

.s7ecatalogsearchviewer .s7tableofcontents {
margin-top: 4px;
margin-left: 10px; width: 28px;
 height: 28px;
}
.s7ecatalogsearchviewer .s7tableofcontents[state='up'] {
background-image:url(images/v2/TableOfContents_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='over'] {
background-image:url(images/v2/TableOfContents_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='down'] {
background-image:url(images/v2/TableOfContents_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='disabled'] {
background-image:url(images/v2/TableOfContents_dark_disabled.png);
}

The appearance of the drop-down panel is controlled with the following CSS class selector:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel

CSS properties of the drop-down panel

background-color

Background color of drop-down panel.

margin

Internal offset between the panel boundaries and the content.

box-shadow

Drop-shadow around the panel.

NOTE

It is not possible to control the size or the position of the drop-down panel from CSS; the component manages its layout programmatically.

Example - set up a drop-down panel that has a semi-transparent black background, a 5 pixel margin around the content, and a drop shadow:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel {
 background-color: rgba(0, 0, 0, 0.5);
 margin: 5px;
 box-shadow: 2px 2px 3px #c0c0c0;
}

The individual item look and feel are controlled with the following CSS class selector:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item

CSS properties of the item

font-family

Font name.

font-size

Font size.

height

Item's height.

padding

Internal padding.

NOTE

Drop-down list item supports the state attribute selector, which can be used to apply different skins to hover and selected item states.

Example - set up a drop-down item with a Helvetica® 14 pixel font and 19 pixel high. An item has a dark gray background on hover and a light gray background when selected:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item {
font-family: Helvetica,sans-serif;
font-size: 14px;
height: 19px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item[state="over"] {
background-color: rgb(102, 102, 102);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item[state="selected"] {
background-color: rgb(178, 178, 178);
}

An element that shows the page index is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index

CSS properties of the page index

min-width

Minimum element width.

max-width

Maximum element width.

padding-right

Distance between the page index and the page label.

NOTE

It is possible to hide the page index entirely by setting display:none for the s7index CSS class.

Example 1 - set up a page index with a minimum width of 40 pixels, a maximum width of 70 pixels, and a 5 pixel margin on the right-hand side:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index {
max-width: 70px;
min-width: 40px;
padding-right: 5px;
}

Example 2 - hide page index:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index {
display: none;
}

The page label is controlled with the following CSS class selector:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7label

CSS properties of the page label

min-width

Minimum element width.

max-width

Maximum element width.

Example - set up a page index with a minimum width of 40 pixels and a maximum width of 240 pixels:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7label {
min-width: 40px;
max-width: 240px;
}

If there are more items than can fit vertically within the drop-down panel – and the system is a desktop – the component renders a vertical scroll bar on the right side of the panel. The appearance of the scroll bar area is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar

CSS properties of the scrollbar

width

The scroll bar width.

top

The vertical scroll bar offset from the top of the panel area.

bottom

The vertical scroll bar offset from the bottom of the panel area.

right

The horizontal scroll bar offset from the right edge of the panel area.

Example - set up a scroll bar that is 28 pixels wide and does not have a margin for the top, right, or bottom area of the panel:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar {
 top:0px;
 bottom:0px;
 right:0px;
 width:28px;
}

Scroll bar track is the area between the top and bottom scroll buttons. The component automatically sets the position and height of the track. The track is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

CSS properties of the scroll track

width

The track width.

background-color

The track background color.

Example - set up a scroll bar track that is 28 pixels wide and has a semi-transparent gray background:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolltrack {
 width:28px;
 background-color:rgba(102, 102, 102, 0.5);
}

The scroll bar thumb moves vertically within the scroll track area. Its vertical position is controlled by the component logic. However, thumb height does not dynamically change depending on the amount of content. You can configure the thumb height and other aspects with the following CSS class selector:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

CSS properties of the scrollbar thumb

width

The thumb width.

height

The thumb height.

padding-top

The vertical padding between the top of the track.

padding-bottom

The vertical padding between the bottom of the track.

background-image

The image that is displayed for a given thumb state.

background-position

Position inside artwork sprite, if CSS sprites are used.